<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>javascript - 肉蛋葱鸡肉粥🍛的博客☕</title><meta name="Description" content=""><meta property="og:title" content="javascript" />
<meta property="og:description" content="JS基础 简单数据类型 Undefined类型 只声明但未初始化 只有一个值：undefined 用typeof检测返回undefined，typeo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.org/posts/javascript/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-07-15T10:31:53+08:00" />
<meta property="article:modified_time" content="2021-07-15T10:31:53+08:00" /><meta property="og:site_name" content="肉蛋葱鸡肉粥🍛的博客☕" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="javascript"/>
<meta name="twitter:description" content="JS基础 简单数据类型 Undefined类型 只声明但未初始化 只有一个值：undefined 用typeof检测返回undefined，typeo"/>
<meta name="application-name" content="肉蛋葱鸡肉粥🍛的博客☕">
<meta name="apple-mobile-web-app-title" content="肉蛋葱鸡肉粥🍛的博客☕"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://example.org/posts/javascript/" /><link rel="prev" href="http://example.org/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" /><link rel="next" href="http://example.org/posts/jquery/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "javascript",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/example.org\/posts\/javascript\/"
        },"genre": "posts","keywords": "es6, javascript, 模块化规范","wordcount":  30127 ,
        "url": "http:\/\/example.org\/posts\/javascript\/","datePublished": "2021-07-15T10:31:53+08:00","dateModified": "2021-07-15T10:31:53+08:00","publisher": {
            "@type": "Organization",
            "name": "yzuxqz"},"author": {
                "@type": "Person",
                "name": "yzuxqz"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/posts/javascript/" selected>简体中文</option></select>
                    </a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/posts/javascript/" selected>简体中文</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">javascript</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/yzuxqz" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>yzuxqz</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/javascript/"><i class="far fa-folder fa-fw"></i>javascript</a>&nbsp;<a href="/categories/%E5%89%8D%E7%AB%AF/"><i class="far fa-folder fa-fw"></i>前端</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-15">2021-07-15</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 30127 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 61 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#简单数据类型">简单数据类型</a>
      <ul>
        <li><a href="#undefined类型">Undefined类型</a></li>
        <li><a href="#null类型">NUll类型</a></li>
        <li><a href="#boolean类型">Boolean类型</a></li>
        <li><a href="#number类型">Number类型</a>
          <ul>
            <li><a href="#数值范围">数值范围</a></li>
            <li><a href="#nan">NaN</a></li>
            <li><a href="#数值转换">数值转换</a>
              <ul>
                <li><a href="#number">Number()</a></li>
                <li><a href="#parseint进制">parseInt(,进制)</a></li>
                <li><a href="#parsefloat">parseFloat()</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#string类型">String类型</a>
          <ul>
            <li><a href="#转为字符串">转为字符串</a>
              <ul>
                <li><a href="#tostring">toString()</a></li>
                <li><a href="#string">String()</a></li>
                <li><a href="#-">+ &quot;&quot;</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#js对象">JS对象</a>
      <ul>
        <li><a href="#创建对象">创建对象</a></li>
        <li><a href="#使用对象">使用对象</a></li>
        <li><a href="#遍历对象">遍历对象</a></li>
        <li><a href="#判断对象类型">判断对象类型</a></li>
      </ul>
    </li>
    <li><a href="#内置对象">内置对象</a>
      <ul>
        <li><a href="#math对象">Math对象</a></li>
        <li><a href="#日期对象">日期对象</a></li>
        <li><a href="#数组对象">数组对象</a>
          <ul>
            <li><a href="#创建数组">创建数组</a></li>
            <li><a href="#检测是否为数组">检测是否为数组</a></li>
            <li><a href="#增">增</a></li>
            <li><a href="#删">删</a></li>
            <li><a href="#改">改</a></li>
            <li><a href="#查">查</a></li>
            <li><a href="#翻转">翻转</a></li>
            <li><a href="#排序">排序</a></li>
            <li><a href="#合并">合并</a></li>
            <li><a href="#数组转字符串">数组转字符串</a></li>
            <li><a href="#数组截取">数组截取</a></li>
            <li><a href="#数组遍历">数组遍历</a></li>
          </ul>
        </li>
        <li><a href="#字符串对象">字符串对象</a>
          <ul>
            <li><a href="#根据值找索引">根据值找索引</a></li>
            <li><a href="#根据索引找值">根据索引找值</a></li>
            <li><a href="#合并-1">合并</a></li>
            <li><a href="#截取">截取</a></li>
            <li><a href="#替换">替换</a></li>
            <li><a href="#大小写">大小写</a></li>
            <li><a href="#去除空格">去除空格</a></li>
            <li><a href="#是否包含">是否包含</a></li>
            <li><a href="#搜索指定内容">搜索指定内容</a></li>
            <li><a href="#提取">提取</a></li>
            <li><a href="#字符串转数组">字符串转数组</a></li>
            <li><a href="#根据字符编码获取字符">根据字符编码获取字符</a></li>
          </ul>
        </li>
        <li><a href="#formdata对象">FormData对象</a></li>
        <li><a href="#arguments的使用">arguments的使用</a></li>
      </ul>
    </li>
    <li><a href="#js预解析">JS预解析</a>
      <ul>
        <li><a href="#变量提升">变量提升</a></li>
        <li><a href="#函数提升">函数提升</a></li>
      </ul>
    </li>
    <li><a href="#json">JSON</a>
      <ul>
        <li><a href="#分类">分类</a></li>
        <li><a href="#json中允许的值">JSON中允许的值</a></li>
        <li><a href="#json转对象">JSON转对象</a></li>
        <li><a href="#对象转json">对象转JSON</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#dom">DOM</a>
      <ul>
        <li><a href="#节点操作">节点操作</a>
          <ul>
            <li>
              <ul>
                <li><a href="#元素节点和元素对象的区别">元素节点和元素对象的区别</a></li>
                <li><a href="#获取节点">获取节点</a></li>
                <li><a href="#获取父节点">获取父节点</a></li>
                <li><a href="#获取子节点">获取子节点</a></li>
                <li><a href="#获取兄弟节点">获取兄弟节点</a></li>
                <li><a href="#创建节点">创建节点</a></li>
                <li><a href="#添加节点">添加节点</a></li>
                <li><a href="#删除节点">删除节点</a></li>
                <li><a href="#复制节点">复制节点</a></li>
                <li><a href="#替换节点">替换节点</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#元素操作">元素操作</a>
          <ul>
            <li><a href="#操作元素内容">操作元素内容</a></li>
            <li><a href="#操作元素属性">操作元素属性</a>
              <ul>
                <li><a href="#获取属性">获取属性</a>
                  <ul>
                    <li><a href="#获取元素自带属性">获取元素自带属性</a></li>
                    <li><a href="#获取元素自定义属性">获取元素自定义属性</a></li>
                  </ul>
                </li>
                <li><a href="#设置属性">设置属性</a>
                  <ul>
                    <li><a href="#设置元素自带属性">设置元素自带属性</a></li>
                    <li><a href="#设置元素自定义属性">设置元素自定义属性</a></li>
                  </ul>
                </li>
                <li><a href="#移除属性">移除属性</a>
                  <ul>
                    <li><a href="#移除元素自定义属性">移除元素自定义属性</a></li>
                  </ul>
                </li>
                <li><a href="#判断是否有该属性">判断是否有该属性</a></li>
              </ul>
            </li>
            <li><a href="#操作元素样式">操作元素样式</a>
              <ul>
                <li><a href="#获取样式属性">获取样式属性</a></li>
                <li><a href="#设置样式属性">设置样式属性</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#动画函数的封装">动画函数的封装</a>
          <ul>
            <li><a href="#动画函数原理">动画函数原理</a></li>
            <li><a href="#动画函数简单封装">动画函数简单封装</a></li>
            <li><a href="#缓动动画函数封装">缓动动画函数封装</a></li>
          </ul>
        </li>
        <li><a href="#三种动态创建元素的区别">三种动态创建元素的区别</a></li>
        <li><a href="#事件">事件</a>
          <ul>
            <li><a href="#鼠标事件">鼠标事件</a></li>
            <li><a href="#键盘事件">键盘事件</a></li>
            <li><a href="#表单事件">表单事件</a></li>
            <li><a href="#编辑事件">编辑事件</a></li>
            <li><a href="#页面事件">页面事件</a></li>
            <li><a href="#滚动事件">滚动事件</a></li>
            <li><a href="#传统事件">传统事件</a>
              <ul>
                <li><a href="#注册">注册</a></li>
                <li><a href="#删除">删除</a></li>
              </ul>
            </li>
            <li><a href="#事件监听器">事件监听器</a>
              <ul>
                <li><a href="#区别传统">区别传统</a></li>
                <li><a href="#注册-1">注册</a></li>
                <li><a href="#删除-1">删除</a></li>
              </ul>
            </li>
            <li><a href="#事件对象">事件对象</a>
              <ul>
                <li><a href="#事件对象属性">事件对象属性</a></li>
                <li><a href="#事件对象方法">事件对象方法</a></li>
                <li><a href="#鼠标事件对象">鼠标事件对象</a></li>
                <li><a href="#键盘事件对象">键盘事件对象</a></li>
                <li><a href="#dom事件流">DOM事件流</a>
                  <ul>
                    <li><a href="#捕获阶段">捕获阶段</a></li>
                    <li><a href="#冒泡阶段">冒泡阶段</a></li>
                  </ul>
                </li>
                <li><a href="#事件委托">事件委托</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#bom">BOM</a>
      <ul>
        <li><a href="#window对象">window对象</a>
          <ul>
            <li><a href="#location属性">location属性</a></li>
            <li><a href="#navigator属性">navigator属性</a></li>
            <li><a href="#histroy属性">histroy属性</a></li>
            <li><a href="#其他常见属性">其他常见属性</a></li>
          </ul>
        </li>
        <li><a href="#window事件">window事件</a></li>
        <li><a href="#定时器">定时器</a>
          <ul>
            <li><a href="#settimeout">setTimeout</a></li>
            <li><a href="#setinterval">setInterval</a></li>
          </ul>
        </li>
        <li><a href="#this指向问题">this指向问题</a></li>
        <li><a href="#js执行对列">JS执行对列</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#类和对象">类和对象</a>
      <ul>
        <li><a href="#构造器">构造器</a></li>
      </ul>
    </li>
    <li><a href="#类的继承">类的继承</a>
      <ul>
        <li><a href="#关键字">关键字</a></li>
        <li><a href="#entends">entends</a></li>
        <li><a href="#继承属性">继承属性</a></li>
        <li><a href="#继承方法">继承方法</a></li>
        <li><a href="#扩展子类的方法">扩展子类的方法</a></li>
      </ul>
    </li>
    <li><a href="#构造函数和对象">构造函数和对象</a>
      <ul>
        <li><a href="#构造函数原型prototype原型对象">构造函数原型：prototype（原型对象）</a></li>
        <li><a href="#对象原型_proto_">对象原型：<em>proto</em></a></li>
        <li><a href="#方法查找规则">方法查找规则</a></li>
        <li><a href="#constructor">constructor</a></li>
        <li><a href="#原型链">原型链</a></li>
        <li><a href="#成员查找机制">成员查找机制</a></li>
        <li><a href="#instance-of">instance of</a></li>
        <li><a href="#this指向">this指向</a></li>
      </ul>
    </li>
    <li><a href="#改变this指向">改变this指向</a>
      <ul>
        <li><a href="#this指向的4种形式">this指向的4种形式</a></li>
        <li><a href="#call">call</a></li>
        <li><a href="#apply">apply</a></li>
        <li><a href="#bind">bind</a></li>
      </ul>
    </li>
    <li><a href="#原型继承">原型继承</a>
      <ul>
        <li><a href="#继承属性-1">继承属性</a></li>
        <li><a href="#继承方法-1">继承方法</a></li>
        <li><a href="#扩展内置对象">扩展内置对象</a></li>
      </ul>
    </li>
    <li><a href="#web-workers">Web Workers</a>
      <ul>
        <li><a href="#缺点">缺点</a></li>
      </ul>
    </li>
    <li><a href="#函数">函数</a>
      <ul>
        <li><a href="#定义">定义</a></li>
        <li><a href="#执行上下文栈">执行上下文栈</a></li>
        <li><a href="#调用方式和this指向">调用方式和this指向</a></li>
      </ul>
    </li>
    <li><a href="#高阶函数">高阶函数</a></li>
    <li><a href="#闭包">闭包</a>
      <ul>
        <li><a href="#变量作用域">变量作用域</a></li>
        <li><a href="#闭包的产生">闭包的产生</a></li>
        <li><a href="#闭包的定义">闭包的定义</a></li>
        <li><a href="#闭包的作用">闭包的作用</a></li>
        <li><a href="#闭包的生命周期">闭包的生命周期</a>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li><a href="#demo">demo</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#闭包的例子">闭包的例子</a>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li><a href="#获取ul中li的索引号">获取ul中li的索引号</a></li>
                    <li><a href="#经典例子">经典例子</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#定时器中的闭包函数">定时器中的闭包函数</a></li>
        <li><a href="#闭包的应用定义js模块">闭包的应用：定义js模块</a></li>
        <li><a href="#闭包的缺点">闭包的缺点</a></li>
        <li><a href="#内存溢出与内存泄漏">内存溢出与内存泄漏</a></li>
        <li><a href="#let的出现">Let的出现</a></li>
      </ul>
    </li>
    <li><a href="#递归">递归</a></li>
    <li><a href="#浅拷贝和深拷贝">浅拷贝和深拷贝</a></li>
    <li><a href="#正则">正则</a>
      <ul>
        <li><a href="#创建">创建</a></li>
        <li><a href="#检测">检测</a></li>
        <li><a href="#特殊字符">特殊字符</a>
          <ul>
            <li><a href="#边界符">边界符</a></li>
            <li><a href="#字符类">字符类</a></li>
            <li><a href="#量词符">量词符</a></li>
          </ul>
        </li>
        <li><a href="#正则中的预定义类">正则中的预定义类</a></li>
        <li><a href="#正则中的替换">正则中的替换</a></li>
        <li><a href="#修饰符">修饰符</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#严格模式">严格模式</a>
      <ul>
        <li><a href="#特点">特点</a></li>
      </ul>
    </li>
    <li><a href="#json对象">JSON对象</a>
      <ul>
        <li>
          <ul>
            <li><a href="#json对象转json字符串">JSON对象转JSON字符串</a></li>
            <li><a href="#json字符串转json对象">JSON字符串转JSON对象</a></li>
            <li><a href="#json的简写">JSON的简写</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#object扩展">Object扩展</a>
      <ul>
        <li><a href="#objectcreateprototypedescriptors">Object.create(prototype,[descriptors])</a></li>
        <li><a href="#objectdefineproperty">Object.defineProperty()</a></li>
        <li><a href="#objectdefinepropertiesobjectdescriptors">Object.defineProperties(object,descriptors)</a></li>
      </ul>
    </li>
    <li><a href="#array扩展">Array扩展</a>
      <ul>
        <li><a href="#indexof">indexOf</a></li>
        <li><a href="#lastindexof">lastIndexOf</a></li>
        <li><a href="#foreach">forEach</a></li>
        <li><a href="#map">map</a></li>
        <li><a href="#filter">filter</a></li>
        <li><a href="#some">some</a></li>
        <li><a href="#reduce参数一参数二">reduce（参数一，参数二）</a></li>
      </ul>
    </li>
    <li><a href="#function扩展">Function扩展</a></li>
  </ul>

  <ul>
    <li>
      <ul>
        <li><a href="#let">let</a></li>
        <li><a href="#const">const</a></li>
        <li><a href="#解构赋值">解构赋值</a></li>
        <li><a href="#箭头函数">箭头函数</a></li>
        <li><a href="#形参默认值">形参默认值</a></li>
        <li><a href="#三点运算符">三点运算符</a></li>
        <li><a href="#json-1">JSON</a>
          <ul>
            <li><a href="#json对象转json字符串-1">JSON对象转JSON字符串</a></li>
            <li><a href="#json字符串转json对象-1">JSON字符串转JSON对象</a></li>
            <li><a href="#json的简写-1">JSON的简写</a></li>
          </ul>
        </li>
        <li><a href="#array的扩展方法">Array的扩展方法</a>
          <ul>
            <li><a href="#扩展运算符">扩展运算符</a></li>
            <li><a href="#arrayform">Array.form()</a></li>
            <li><a href="#arrayfind">Array.find()</a></li>
            <li><a href="#arrayfindindex">Array.findindex()</a></li>
          </ul>
        </li>
        <li><a href="#string的扩展方法">String的扩展方法</a>
          <ul>
            <li><a href="#模板字符串">模板字符串</a></li>
            <li><a href="#includes">includes()</a></li>
            <li><a href="#startswith">startsWith()</a></li>
            <li><a href="#startswith-1">startsWith()</a></li>
            <li><a href="#endswith">endsWith()</a></li>
            <li><a href="#repeat">repeat()</a></li>
            <li><a href="#trim">trim()</a></li>
          </ul>
        </li>
        <li><a href="#number的扩展方法">Number的扩展方法</a>
          <ul>
            <li><a href="#isfinite">isFinite()</a></li>
            <li><a href="#isnan">isNaN()</a></li>
            <li><a href="#isinteger">isInteger()</a></li>
            <li><a href="#parseint">parseInt()</a></li>
            <li><a href="#trunc">trunc()</a></li>
          </ul>
        </li>
        <li><a href="#object的扩展方法">Object的扩展方法</a>
          <ul>
            <li><a href="#objectisv1v2">Object.is(v1,v2)</a></li>
            <li><a href="#objectassigntargetsource1source2">Object.assign(target,source1,source2..)</a></li>
            <li><a href="#直接操作_proto_属性">直接操作_proto_属性</a></li>
            <li><a href="#objectkeys">Object.keys()</a></li>
          </ul>
        </li>
        <li><a href="#promise">Promise</a></li>
        <li><a href="#symbol">symbol</a></li>
        <li><a href="#iterator遍历器">iterator遍历器</a>
          <ul>
            <li><a href="#作用">作用：</a></li>
            <li><a href="#工作原理">工作原理：</a></li>
            <li><a href="#底层实现">底层实现：</a></li>
            <li><a href="#实现了iterator接口的数据结构">实现了iterator接口的数据结构</a></li>
          </ul>
        </li>
        <li><a href="#generator">generator</a>
          <ul>
            <li><a href="#yield">yield</a></li>
          </ul>
        </li>
        <li><a href="#class类和继承">class类和继承</a>
          <ul>
            <li><a href="#类和对象-1">类和对象</a></li>
            <li><a href="#构造器-1">构造器</a></li>
            <li><a href="#类的继承-1">类的继承</a>
              <ul>
                <li><a href="#关键字-1">关键字</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#entends-1">entends</a>
          <ul>
            <li>
              <ul>
                <li><a href="#继承属性-2">继承属性</a></li>
                <li><a href="#继承方法-2">继承方法</a></li>
                <li><a href="#扩展子类的方法-1">扩展子类的方法</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#深度克隆">深度克隆</a>
          <ul>
            <li><a href="#封装深拷贝函数">封装深拷贝函数</a></li>
          </ul>
        </li>
        <li><a href="#set容器">set容器</a>
          <ul>
            <li><a href="#实例方法">实例方法</a></li>
            <li><a href="#set遍历">Set遍历</a>
              <ul>
                <li><a href="#sforeachvaluelogvalue">s.forEach(value=&gt;log(value))</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#map容器">map容器</a></li>
        <li><a href="#for-of">for of</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#asyncawait">async/await</a></li>
    <li><a href="#arrayincludes">Array.includes()</a></li>
    <li><a href="#指数运算符">指数运算符</a></li>
  </ul>

  <ul>
    <li><a href="#namespace模式">namespace模式</a></li>
    <li><a href="#iife模式">IIFE模式</a></li>
    <li><a href="#iife模式增强">IIFE模式增强</a></li>
    <li><a href="#commonjs">CommonJS</a>
      <ul>
        <li><a href="#规范">规范</a></li>
        <li><a href="#基于服务器端">基于服务器端</a></li>
        <li><a href="#基于浏览器端">基于浏览器端</a></li>
      </ul>
    </li>
    <li><a href="#amd">AMD</a>
      <ul>
        <li><a href="#规范-1">规范</a></li>
      </ul>
    </li>
    <li><a href="#cmd">CMD</a></li>
    <li><a href="#es6-1">ES6</a>
      <ul>
        <li><a href="#httpsrawgithubusercontentcomyzuxqzpic-bedmasternotes-imges6babelpng"><img src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png" alt=""></a></li>
        <li><a href="#统一暴露">统一暴露</a></li>
        <li><a href="#默认暴露">默认暴露</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h1 id="js基础">JS基础</h1>
<h2 id="简单数据类型">简单数据类型</h2>
<h3 id="undefined类型">Undefined类型</h3>
<ul>
<li>只声明但未初始化</li>
<li>只有一个值：undefined</li>
<li>用typeof检测返回undefined，typeof返回的值是一个字符串</li>
</ul>
<h3 id="null类型">NUll类型</h3>
<ul>
<li>表示空对象指针，用于未来会保存对象的变量初始化</li>
<li>只有一个值：null</li>
<li>用typeof检测返回object，typeof返回的值是一个字符串</li>
<li>==注意==：undefined派生自null（null==undefined为true，但是null == =undefined为false）</li>
</ul>
<h3 id="boolean类型">Boolean类型</h3>
<ul>
<li>只有两个值：true和false</li>
<li>转型函数Boolean()
<ol>
<li>数字：除了0和NaN，其余都是true</li>
<li>字符串：除了空串都为true</li>
<li>null，undefined为false</li>
<li>对象为true</li>
</ol>
</li>
<li>对任意数据类型取反两次!!可以转为布尔值</li>
</ul>
<h3 id="number类型">Number类型</h3>
<ul>
<li>js中所有的数字都是Number类型</li>
<li>二进制0b</li>
<li>八进制最高位加0</li>
<li>十六进制最高位加0x</li>
<li>浮点数在小数点后没有数或小数点后都为0时会被转为整型</li>
<li>==注意==：
<ol>
<li>在输出和进行算术运算时都会转换成十进制</li>
<li>ECMAScript中浮点计算（0.2+0.1）会有误差，因此不要去判断浮点数</li>
</ol>
</li>
</ul>
<h4 id="数值范围">数值范围</h4>
<ul>
<li>超过Number.MAX_VALUE和-Number.MAX_VALUE的数值会被转成 Infinity和-Infinity</li>
<li>Number.MIN_VALUE表示的是&gt;0的最小值</li>
</ul>
<h4 id="nan">NaN</h4>
<ul>
<li>任何涉及NaN的操作都会返回NaN（没有字符串连接）</li>
<li>NaN与任何值都不想等，包括NaN本身</li>
<li>isNaN()用于测试传入的数值是否能转为数值，如果能则返回false</li>
<li>==注意==：
<ol>
<li>
<p>typeof NaN为number</p>
</li>
<li>
<p>true能转化为1</p>
</li>
</ol>
</li>
<li>isNaN()也适用于对象，对象调用isNaN()函数时首先调用对象自己的valueOf()方法，以确定该方法的返回值是否可以转为数值。如果不能，再基于这个返回值调用tostring()方法，再次测试</li>
</ul>
<h4 id="数值转换">数值转换</h4>
<h5 id="number">Number()</h5>
<ul>
<li>可以用于任何数据类型</li>
<li>Boolean值，true返回1，false返回0</li>
<li>null值，返回0</li>
<li>undefined值，返回NaN（Number类型）</li>
<li>字符串，除空的转为0，有额外字符的转为NaN，其他都转为十进制数</li>
<li>==注意==：不能转八进制，因为前导0会忽视</li>
</ul>
<h5 id="parseint进制">parseInt(,进制)</h5>
<ul>
<li>
<p>用于将一个字符串中的有效==整数==内容取出来</p>
</li>
<li>
<p>如果第一个字符不是数值或负号，则返回NaN。(空返回NaN)</p>
</li>
<li>
<p>直到解析到非数字字符（包括小数点）停止</p>
</li>
<li>
<p>能够解析八进制和十六进制，加上第二个参数，表示基数是多少进制</p>
</li>
</ul>
<p>==注意==：</p>
<ol>
<li>对于非字符串值会先转为String然后再操作</li>
</ol>
<h5 id="parsefloat">parseFloat()</h5>
<ul>
<li>可以解析第一个小数点</li>
<li>只能解析十进制数</li>
<li>如果传入的字符是整数，则也会返回整数</li>
</ul>
<h3 id="string类型">String类型</h3>
<ul>
<li>转义字符</li>
<li>拼接字符串会很慢，字符串的不可变性</li>
<li>注意比较运算符的==两边都是==字符串时不会将其转化成数字进行比较，而会分别比较字符串中字符的Unicode编码，一位一位进行比较，如果两位一样则比较下一位，所以==在比较两个字符串型的数字之前一定要转成Number==</li>
</ul>
<h4 id="转为字符串">转为字符串</h4>
<h5 id="tostring">toString()</h5>
<ul>
<li>除了null，undefined都有该方法</li>
<li>参数表示返回数值的进制</li>
<li>该方法有返回值，不会影响原变量</li>
</ul>
<h5 id="string">String()</h5>
<ul>
<li>对于Number和Boolean，实际还是调用toString()方法</li>
<li>如果值为null，返回 “null”</li>
<li>如果值为undefined，返回“undefined”</li>
</ul>
<h5 id="-">+ &quot;&quot;</h5>
<ul>
<li>加一个空字符串，隐式类型转换</li>
</ul>
<h2 id="js对象">JS对象</h2>
<h3 id="创建对象">创建对象</h3>
<ul>
<li>
<p>字面量</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;xqz&#39;</span><span class="p">,</span> <span class="c1">//里面的属性方法采取键值对的形式
</span><span class="c1"></span>            <span class="nx">sayHi</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">//方法冒号后面跟的是一个匿名函数
</span><span class="c1"></span>                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;hi&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>利用Object()</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Object</span><span class="p">();</span> <span class="c1">//一个空对象
</span><span class="c1"></span>        <span class="nx">obj</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="s1">&#39;xqz&#39;</span><span class="p">;</span>
        <span class="nx">obj</span><span class="p">.</span><span class="nx">sayHi</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hi&#39;</span><span class="p">);</span>
        <span class="p">};</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>构造函数</p>
<p>function Person(){</p>
<p>}</p>
<p>Person()		//不加new是普通函数</p>
<p>new Person()		//加new是构造函数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="kd">function</span> <span class="nx">Star</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">,</span> <span class="nx">sex</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//构造函数首字母大写
</span><span class="c1"></span>            <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">sex</span> <span class="o">=</span> <span class="nx">sex</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">sing</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">songs</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">songs</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="s1">&#39;男&#39;</span><span class="p">);</span> <span class="c1">//构造函数不需要return
</span><span class="c1"></span>        <span class="nx">ldh</span><span class="p">.</span><span class="nx">sing</span><span class="p">(</span><span class="s1">&#39;冰雨&#39;</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<p>==注意==：</p>
<ol>
<li>
<p>构造函数每执行一次就会创建一个新的方法，也就是说所有的实例的sing方法都是唯一的，这样占用了大量的内存空间，完全可以让所有的对象共享一个方法：对象的prototype属性中写</p>
</li>
<li>
<p>对于不再使用的对象，必须设置为null，这样GC才会回收</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span><span class="c1">//此时仍有变量在引用
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">//此时栈中对堆中的引用断开，对象成为垃圾
</span></code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="使用对象">使用对象</h3>
<ul>
<li>
<p>使用属性</p>
<p>obj.uname</p>
<p>obj.[&lsquo;uname&rsquo;]</p>
</li>
<li>
<p>使用方法</p>
<p>obj.sayHi();</p>
</li>
</ul>
<p>hasOwnproperty() 方法验证属性是存在于对象中，还是存在于实例中。在实例中则返回true，在构造函数的prototype中则返回false。 name in Object 只要能通过原型链找到则返回false. hasPrototypeProperty()方法  实例中重写属性后，属性就存在于实例中，原型中的属性就用不到了。</p>
<p>枚举（不明白） 得到所有可枚举的实例属性 Object.keys()方法</p>
<p>Object.assign(default,new)  //属性覆盖</p>
<h3 id="遍历对象">遍历对象</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">ldh</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span><span class="c1">//输出属性名
</span><span class="c1"></span>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ldh</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span><span class="c1">//输出属性值
</span><span class="c1"></span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>“属性名” in 对象：可以检查obj中是否有该属性</li>
<li>obj2=obj1；此时修改obj1中的值会影响obj2因为他们指向的是同一个堆地址，如果让obj1=null，并不会改变obj2的值，只是将obj1的指向断开，堆内存中的值仍然存在</li>
</ol>
<h3 id="判断对象类型">判断对象类型</h3>
<ol>
<li>
<p>instance of检测是否为该对象类型，Array和Function都是特殊的Object类型</p>
</li>
<li>
<p>typeof</p>
<p>能区别：数值/字符串/布尔值/undefined/function</p>
<p>不能区别：null与Object，Object和Array</p>
</li>
<li>
<p>===只对undefined和null有效，因为只有这两种类型有固定值</p>
</li>
<li>
<p>typeof a（返回值是字符串类型） === &lsquo;undefined&rsquo;也可以进行判断，注意undefined == =’undefined‘是false，一个是undefined类型，一个是字符串类型</p>
</li>
</ol>
<h2 id="内置对象">内置对象</h2>
<h3 id="math对象">Math对象</h3>
<ul>
<li>
<p>最大值</p>
<p>Math.max()</p>
</li>
<li>
<p>绝对值</p>
<p>Math.abs()</p>
</li>
<li>
<p>取整</p>
<ul>
<li>
<p>向下</p>
<p>Math.floor()</p>
</li>
<li>
<p>向上</p>
<p>Math.ceil()</p>
</li>
<li>
<p>四舍五入</p>
<p>Math.round()</p>
<p>==注意==：负数中.5特殊，往大了取</p>
</li>
</ul>
</li>
<li>
<p>随机数</p>
<ul>
<li>
<p>返回[0,1)之间的小数</p>
<p>Math.random()</p>
</li>
<li>
<p>返回两个数之间的随机整数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//返回两个数之间的随机整数，并且包含这两个数
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">getRandom</span><span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="p">(</span><span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span> <span class="o">+</span> <span class="mi">1</span><span class="p">))</span> <span class="o">+</span> <span class="nx">min</span><span class="p">;</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
</li>
</ul>
<h3 id="日期对象">日期对象</h3>
<ul>
<li>
<p>返回系统当前时间
new Date()</p>
</li>
<li>
<p>返回自定义的时间</p>
<ul>
<li>
<p>参数为数字型</p>
<p>new Date(2020,6,30)</p>
<p>==注意==：返回的月份比实际大1月</p>
</li>
<li>
<p>参数为字符串型</p>
<p>new Date(‘2020–6–30 8:23:45’);</p>
</li>
</ul>
</li>
<li>
<p>年</p>
<p>date.getFullYear()</p>
</li>
<li>
<p>月</p>
<p>date.getMouth() + 1（0~11）</p>
</li>
<li>
<p>日</p>
<p>date.getDate()</p>
</li>
<li>
<p>周几</p>
<p>date.getDay()   （0-6）</p>
</li>
<li>
<p>时</p>
<p>date.getHours()</p>
</li>
<li>
<p>分</p>
<p>date,getMinutes()</p>
</li>
<li>
<p>秒</p>
<p>date.getSeconds()</p>
</li>
<li>
<p>时间戳（毫秒）</p>
<p>==注意==：是距离1970年1月1日过了多少毫秒</p>
<ul>
<li>
<p>date.valueof()</p>
</li>
<li>
<p>date.getTime()</p>
</li>
<li>
<p>+new Date()</p>
</li>
<li>
<p>Date.now()<!--H5新增--></p>
</li>
</ul>
</li>
</ul>
<h3 id="数组对象">数组对象</h3>
<h4 id="创建数组">创建数组</h4>
<ul>
<li>
<p>字面量</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">3</span><span class="p">]</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>利用new Array()</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">//长度为2的空数组
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">//等价于[2,3]表示里面有两个数组元素是2和3
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<p>==注意==：</p>
<ol>
<li>读取不存在的索引不会报错，返回undefined</li>
<li>对于连续的数组，用length会得到数组的长度，对于非连续的数组，length获得数组的最大索引加1</li>
</ol>
<h4 id="检测是否为数组">检测是否为数组</h4>
<ul>
<li>arr instance of Array</li>
<li>Array.isArray(arr)<!--H5新增--></li>
</ul>
<h4 id="增">增</h4>
<ul>
<li>
<p>在末尾加,   返回新数组长度</p>
<p>arr.push()</p>
</li>
<li>
<p>在开头加，返回新数组长度</p>
<p>arr.unshift()</p>
</li>
<li>
<p>在指定位置加</p>
<p>splice(开始索引，0，添加的元素) //返回删除的数组，在开始的索引之后增加</p>
</li>
</ul>
<h4 id="删">删</h4>
<ul>
<li>
<p>删末尾一个，返回删除的元素</p>
<p>arr.pop()</p>
</li>
<li>
<p>删开头一个，返回删除的元素</p>
<p>arr.shift()</p>
</li>
<li>
<p>删除并在删除位置添加，会改变原数组</p>
<p>splice(开始索引，删除个数，添加的元素)//返回删除的数组</p>
</li>
</ul>
<h4 id="改">改</h4>
<p>​	splice(开始索引，删除个数，添加的元素)//返回删除的数组</p>
<h4 id="查">查</h4>
<p>根据元素找索引</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;A&#39;</span><span class="p">));</span> <span class="c1">//从前往后找 它只返回第一个满足条件的索引号 找不到则会返回-1
</span><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">.</span><span class="nx">lastIndexOf</span><span class="p">(</span><span class="s1">&#39;A&#39;</span><span class="p">));</span> <span class="c1">//从后往前找
</span></code></pre></td></tr></table>
</div>
</div><p>findIndex(),返回一个索引</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//根据id从数组中查找元素的索引
</span><span class="c1"></span><span class="k">this</span><span class="p">.</span><span class="nx">books</span><span class="p">.</span><span class="nx">findIndex</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">id</span><span class="p">;</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="翻转">翻转</h4>
<p>arr.reverse()，修改原数组</p>
<h4 id="排序">排序</h4>
<ol>
<li>修改原数组，默认按照unicode编码进行排序</li>
<li>sort里放一个函数如果返回大于0的数则a,b交换位置，如果返回小于0的数则a,b不交换位置</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">arr</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="p">){</span>
  <span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="o">&gt;</span><span class="nx">b</span><span class="p">){</span>
    <span class="k">return</span> <span class="mi">1</span><span class="p">;</span><span class="c1">//换位置
</span><span class="c1"></span>  <span class="p">}</span><span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="o">&lt;</span><span class="nx">b</span><span class="p">){</span>
    <span class="k">return</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span><span class="c1">//不换
</span><span class="c1"></span>  <span class="p">}</span><span class="k">else</span><span class="p">{</span>
    <span class="k">return</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//a和b相等
</span><span class="c1"></span>  <span class="p">}</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//对数字进行排序结果会出错，所以需要在sort里面放一个函数实现排序
</span><span class="c1"></span><span class="nx">arr</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
  <span class="o">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span> <span class="nx">HEAD</span>
          <span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span><span class="c1">//升序，如果a-b&gt;0,a&gt;b返回一个&gt;0的数，交换位置
</span><span class="c1"></span><span class="p">});</span>
<span class="k">return</span> <span class="nx">b</span><span class="o">-</span><span class="nx">a</span><span class="p">;</span><span class="c1">//降序
</span><span class="c1"></span><span class="o">=======</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span><span class="c1">//降序，如果a-b&gt;0,a&gt;b返回一个&gt;0的数，交换位置
</span><span class="c1"></span><span class="p">});</span>
<span class="k">return</span> <span class="nx">b</span><span class="o">-</span><span class="nx">a</span><span class="p">;</span><span class="c1">//升序
</span><span class="c1"></span><span class="o">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span> <span class="mi">1</span><span class="nx">ceb7a2e23037ad4c54e9f577ca2057109b71222</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="合并">合并</h4>
<p>arr1.concat(arr2)</p>
<p>不会改变原数组，返回新数组</p>
<h4 id="数组转字符串">数组转字符串</h4>
<ul>
<li>arr.join(连接符)  //默认逗号，不会改变原数组，将转换后的字符串作为结果返回</li>
<li>arr.toString()  //逗号分隔</li>
</ul>
<h4 id="数组截取">数组截取</h4>
<p>arr.slice(开始索引，结束索引（不包含）)</p>
<p>==注意==：</p>
<ol>
<li>如果传递一个负值，则从后往前进行计算</li>
<li>不会改变原数组</li>
</ol>
<h4 id="数组遍历">数组遍历</h4>
<ul>
<li>array.filter(function(currentValue,index,arr), thisValue)//当前元素的值，当前元素的索引，当前元素属于的数组对象
<ul>
<li>不会改变原始数组</li>
<li>返回一个新数组</li>
</ul>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="c1">//根据id查询出要编辑的数据
</span><span class="c1"></span><span class="k">this</span><span class="p">.</span><span class="nx">books</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">books</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">){</span>
  <span class="k">return</span> <span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="o">==</span><span class="nx">id</span><span class="p">;</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>some(function(){})
<ul>
<li>用于检测数组中的元素是否满足指定条件</li>
<li>some()方法会以此执行数组的每个元素：
<ul>
<li>==如果有一个元素满足条件，则表达式返回true==，剩余的元素不再遍历</li>
<li>如果没有满足体条件的元素，返回false</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>==注意==：不能对空数组进行检测</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="c1">//根据当前的id去更新数组中对应的数据
</span><span class="c1"></span><span class="k">this</span><span class="p">.</span><span class="nx">books</span><span class="p">.</span><span class="nx">some</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="c1">//箭头函数中的this指向定义这个函数的父级作用域中的this，也就是handle的this，指向vue实例
</span><span class="c1"></span>  <span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">item</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
    <span class="c1">//完成更新操作后需要中止some遍历
</span><span class="c1"></span>    <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="字符串对象">字符串对象</h3>
<ul>
<li>
<p>string是简单数据类型，为什么有length属性？</p>
<p>步骤：</p>
<ol>
<li>创建基本类型的一个实例；</li>
<li>在实例上调用指定的方法；</li>
<li>销毁这个实例；</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">str</span> <span class="o">=</span> <span class="s2">&#34;我是string基本类型的值&#34;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">new_str</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s2">&#34;我是string基本类型的值&#34;</span><span class="p">);</span>  <span class="c1">// 包装处理
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">my_str</span> <span class="o">=</span> <span class="nx">new_str</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span><span class="mi">8</span><span class="p">);</span>
<span class="nx">new_str</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>   <span class="c1">// 方法调用之后销毁实例
</span><span class="c1"></span>
<span class="kd">var</span> <span class="nx">str2</span> <span class="o">=</span> <span class="s2">&#34;xqz&#34;</span><span class="p">;</span>
<span class="nx">str2</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="mi">21</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>   <span class="c1">//undefined
</span><span class="c1">//可见，并非string调用了自身的方法，而是后台创建了一个基本包装类型String，从而进行下一步操作。
</span><span class="c1">//基本类型的“销毁性”致使我们不能为基本类型添加属性和方法。
</span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>==注意==：String,Number,Boolean都是基本包装类型</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">123</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">hello</span> <span class="o">=</span> <span class="s2">&#34;hello&#34;</span><span class="p">;</span> <span class="c1">//这里不报错是因为转为了基本包装类型Number(),给改对象添加了hello属性，而后让new_num=null从而销毁实例
</span><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">hello</span><span class="p">);</span><span class="c1">//这里调用a的hello属性不报错，结果为undefined，因为重新又创建了一个Number()实例，此时这个实例中并没有hello属性
</span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>字符串的不可变性</p>
<p>指的是里面的值不变，其实只是地址变了，内存中开辟了一个内存空间</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">str2</span> <span class="o">=</span> <span class="s1">&#39;andy&#39;</span><span class="p">;</span>
<span class="nx">str2</span> <span class="o">=</span> <span class="s1">&#39;red&#39;</span><span class="p">;</span> <span class="c1">//str从andy指向red，但是andy仍然存在
</span><span class="c1">//因为我们字符串的不可变所以不要大量拼接字符串
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">str2</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">100</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//如果i过大会很卡
</span><span class="c1"></span>	<span class="nx">str</span> <span class="o">+=</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">str</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>==注意==：字符串的所有方法都不改变自身，都返回一个新的字符串</p>
</li>
</ul>
<h4 id="根据值找索引">根据值找索引</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">str</span> <span class="o">=</span> <span class="s1">&#39;改革春风吹满地，春天来了&#39;</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;春&#39;</span><span class="p">));</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;春&#39;</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">//从索引号3的位置(包括3)往后找 lastindexof()同理
</span></code></pre></td></tr></table>
</div>
</div><h4 id="根据索引找值">根据索引找值</h4>
<ul>
<li>
<p>返回字符</p>
<p>str.charAt()</p>
<p>str[]<!--H5新增--></p>
</li>
<li>
<p>返回ASCII值，unicode编码</p>
<p>str.charCodeAt()</p>
</li>
<li>
<p>str[]</p>
<p>因为在底层字符串是以字符数组的形式保存的</p>
</li>
</ul>
<h4 id="合并-1">合并</h4>
<p>​	str1.concat(str2)</p>
<h4 id="截取">截取</h4>
<ul>
<li>str.substr(开始的索引，截取长度)  //如果只有一个参数且为负数，则是从后往前</li>
<li>str.substring(开始索引，结束索引)  //结束索引不能为负数，负数会被转为0,如果第二个参数小于第一个参数会自动交换位置</li>
<li>str.slice(开始索引，结束索引（不包含）) //可以接受负数，会将字符串长度与负数相加作为第二个参数</li>
<li>都是返回截取下来的字符串</li>
</ul>
<h4 id="替换">替换</h4>
<p>​	str.replace(要替换，替换为)  //只会换一个</p>
<p>返回一个新的字符串</p>
<p>可以接收正则表达式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[a-z]/g</span><span class="p">,</span><span class="s2">&#34;@&#34;</span><span class="p">);</span><span class="c1">//全部替换
</span></code></pre></td></tr></table>
</div>
</div><h4 id="大小写">大小写</h4>
<p>​	toUpperCase()</p>
<p>​	toLowerCase()</p>
<h4 id="去除空格">去除空格</h4>
<p>​	str.trim()</p>
<h4 id="是否包含">是否包含</h4>
<p>​	str.includes()   //返回bool类型（es6）</p>
<h4 id="搜索指定内容">搜索指定内容</h4>
<p>​	str.search()</p>
<p>​	如果搜索到指定内容,则会返回第一次出现的索引，如果没有搜索到则返回-1，它可以接收正则表达式作为参数来进行搜索</p>
<p>​	str.search(/a[bef]c/)，不能全局匹配，只会查找第一个</p>
<h4 id="提取">提取</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">str</span> <span class="o">=</span> <span class="s1">&#39;123afd445fda5&#39;</span><span class="p">;</span>
<span class="nx">result</span> <span class="o">=</span> <span class="nx">str</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/[A-z]/</span><span class="p">);</span><span class="c1">//默认情况下match智慧找到第一个符合要求的内容，找到以后就会停止检索，可以设置正则表达式为全局匹配模式
</span><span class="c1"></span><span class="nx">result</span> <span class="o">=</span> <span class="nx">str</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/[A-z]/gi</span><span class="p">);</span><span class="c1">//全局匹配并且忽略大小写，返回一个新的数组
</span></code></pre></td></tr></table>
</div>
</div><h4 id="字符串转数组">字符串转数组</h4>
<p>​	str.split(以什么分隔符分割该字符串)  //返回一个数组</p>
<p>==注意==：</p>
<ol>
<li>根据任意字母来将字符串拆分str.split(/[A-z]/)，这个方法不设置全局匹配也会全部拆分;</li>
</ol>
<h4 id="根据字符编码获取字符">根据字符编码获取字符</h4>
<p>​	var result = String.fromCharCode()</p>
<h3 id="formdata对象">FormData对象</h3>
<p><a href="https://www.jianshu.com/p/e984c3619019" target="_blank" rel="noopener noreffer">https://www.jianshu.com/p/e984c3619019</a></p>
<h3 id="arguments的使用">arguments的使用</h3>
<ul>
<li>
<p>arguments是函数的一个内置对象，只有function()才有，当不确定有几个参数传递时使用</p>
</li>
<li>
<p>arguments是一个伪数组：可以通过索引访问，有length属性，但是没有数组的方法</p>
</li>
</ul>
<h2 id="js预解析">JS预解析</h2>
<h3 id="变量提升">变量提升</h3>
<p>只提升变量名（使用var定义），不提升赋值操作</p>
<h3 id="函数提升">函数提升</h3>
<p>只提升函数声名，不调用函数</p>
<p>==注意==：先执行变量提升，再执行函数提升</p>
<ul>
<li>
<p>例题</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">	    <span class="nx">f1</span><span class="p">();</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">h</span><span class="p">);</span>

        <span class="kd">function</span> <span class="nx">f1</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">c</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span>
            <span class="c1">//相当于 Var a=9;b=9;c=9;b和c直接赋值 没有var 当全局变量看
</span><span class="c1"></span>            <span class="c1">//集体声明应该写成 var a=9，b=9,c=9;
</span><span class="c1"></span>            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">h</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="c1">//相当于
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">f1</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">h</span><span class="p">;</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span>
            <span class="nx">b</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span>
            <span class="nx">c</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">h</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">f1</span><span class="p">();</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">h</span><span class="p">);</span><span class="c1">//此处报错，h没有声名，因为h的作用域只在f1函数中
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="json">JSON</h2>
<ol>
<li>JS中的对象只有JS自己认识，其他的语言都不认识</li>
<li>JSON就是一个特殊格式的字符串，可以被任意语言所识别，且可以转成任意语言的对象，JSON在开发中主要用来数据的交互</li>
<li>JavaScript Object Notation JS对象表示法</li>
</ol>
<p>==注意==：</p>
<ol>
<li>JSON字符串的属性名必须加双引号</li>
</ol>
<h3 id="分类">分类</h3>
<ol>
<li>对象{}</li>
<li>数组[]</li>
</ol>
<h3 id="json中允许的值">JSON中允许的值</h3>
<ol>
<li>字符串</li>
<li>数值</li>
<li>布尔值</li>
<li>null</li>
<li>对象</li>
<li>数组</li>
</ol>
<h3 id="json转对象">JSON转对象</h3>
<p>JSON.parse()</p>
<ol>
<li>需要一个JSON字符串作为参数，会将该字符串转为JSON对象</li>
</ol>
<h3 id="对象转json">对象转JSON</h3>
<p>JSON.stringify()</p>
<ol>
<li>需要一个js对象作为参数，会返回一个JSON字符串</li>
</ol>
<h1 id="webapi">WebAPI</h1>
<h2 id="dom">DOM</h2>
<h3 id="节点操作">节点操作</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7.png" /></p>
<ul>
<li>
<p>nodeType</p>
<ol>
<li>元素节点</li>
<li>属性节点</li>
<li>文本节点</li>
</ol>
</li>
<li>
<p>nodeName</p>
</li>
<li>
<p>nodeValue</p>
</li>
</ul>
<p>==注意==：节点操作主要操作元素节点</p>
<h5 id="元素节点和元素对象的区别">元素节点和元素对象的区别</h5>
<p>1.所谓元素，即html文档里面，所有的标签都可以称之为元素，比如说<p>、<tr>等，也就是说元素是个统称，一个文档里面有很多的元素。</p>
<p>2.所谓节点，是js为了对html文档进行操作，而开发的，即DOM，文档对象模型。即每个元素都可以称之为一个节点，节点是唯一的。比方来说，《p》标签，肯定是一个p标签元素，那如果通过js对它进行样式控制的时候，就必须获取（找到）到这个元素，称之为节点，如果有好多元素，可以获得第1个、第2个或者第n个。总之，元素是统称，节点是具有唯一性的。</p>
<h5 id="获取节点">获取节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>document.getElementById('')</td>
<td>根据id返回元素对象</td>
</tr>
<tr>
<td>document.getElementByClassName('')</td>
<td>根据类名返回元素对象</td>
</tr>
<tr>
<td>document.getElementByTagName('')</td>
<td>根据标签名返回元素对象集合（伪数组），可以先获取父元素在获取子元素</td>
</tr>
<tr>
<td>document.querySelector('')</td>
<td>根据css选择器返回第一个符合条件的元素对象</td>
</tr>
<tr>
<td>document.querySelectorAll('')</td>
<td>根据css选择器返回所有元素对象</td>
</tr>
<tr>
<td>document.body()</td>
<td>获取body标签</td>
</tr>
<tr>
<td>document.documentElement</td>
<td>获取html标签</td>
</tr>
</tbody>
</table>
<p>==注意==：得到的多个都是伪数组</p>
<h5 id="获取父节点">获取父节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.parentNode</td>
<td>得到的是离元素最近的父级节点</td>
</tr>
</tbody>
</table>
<h5 id="获取子节点">获取子节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.children</td>
<td>得到所有子节点（元素节点）</td>
</tr>
<tr>
<td>node.children[0]</td>
<td>得到子节点的第一个元素</td>
</tr>
<tr>
<td>node.children[node.children.length-1]</td>
<td>得到子节点的最后一个元素</td>
</tr>
<tr>
<td>node.childNodes</td>
<td>包括空白的所有子节点</td>
</tr>
<tr>
<td>node.firstChild</td>
<td>包括空白的第一个子节点</td>
</tr>
<tr>
<td>node.firstElementchild</td>
<td>不包括空白的第一个子节点</td>
</tr>
</tbody>
</table>
<h5 id="获取兄弟节点">获取兄弟节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.nextElementSibling</td>
<td>下一个兄弟节点（元素节点）</td>
</tr>
<tr>
<td>node.previousElementSibling</td>
<td>上一个兄弟节点（元素节点）</td>
</tr>
</tbody>
</table>
<h5 id="创建节点">创建节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>var child = document.createElement(&lsquo;标签名&rsquo;)</td>
<td>创建一个节点</td>
</tr>
<tr>
<td>document.createTextNode()</td>
<td>创建文本节点，child.appendChild(textnode)</td>
</tr>
<tr>
<td>element.innerHTML=&rsquo;'</td>
<td>创建并且添加</td>
</tr>
</tbody>
</table>
<h5 id="添加节点">添加节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.appendChild(child)</td>
<td>添加到父节点（node）的子节点列表末尾</td>
</tr>
<tr>
<td>node.insertBefore(child,指定元素（node.children[]）)</td>
<td>添加到父节点（node）的指定的子节点之前</td>
</tr>
</tbody>
</table>
<h5 id="删除节点">删除节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.removeChlid(child)</td>
<td>node是一个父节点</td>
</tr>
<tr>
<td>node.remove()</td>
<td>删除自身节点及其子节点</td>
</tr>
</tbody>
</table>
<h5 id="复制节点">复制节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.cloneNode()</td>
<td>只复制标签</td>
</tr>
<tr>
<td>node.cloneNode(true)</td>
<td>深拷贝，全复制</td>
</tr>
</tbody>
</table>
<h5 id="替换节点">替换节点</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>node.replaceChild(new ,old)</td>
<td>替换节点</td>
</tr>
</tbody>
</table>
<h3 id="元素操作">元素操作</h3>
<h4 id="操作元素内容">操作元素内容</h4>
<p>innerHTML和innerText的区别</p>
<ul>
<li>
<p>innerText不识别html标签，且会自动去除空格和换行</p>
</li>
<li>
<p><a href="" rel="">innerHTML</a>识别html标签，且保留空格和换行</p>
</li>
<li>
<p>这两个属性可读写，可以获取元素里面的内容</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//innerText和inner HTML的区别
</span><span class="c1"></span>        <span class="c1">//1.innerText 不识别HTML标签 去除空格和换行
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
        <span class="nx">div</span><span class="p">.</span><span class="nx">innerText</span><span class="o">=</span><span class="s1">&#39;&lt;strong&gt;1&lt;/strong&gt;&#39;</span><span class="p">;</span>
        <span class="c1">//2.innerHTML 识别HTML标签 （常用） 保留空格和换行
</span><span class="c1"></span>        <span class="nx">div</span><span class="p">.</span><span class="nx">innerHTML</span><span class="o">=</span><span class="s1">&#39;&lt;strong&gt;1&lt;/strong&gt;&#39;</span><span class="p">;</span>

        <span class="c1">//这两个属性可读写 可获取元素里的内容
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">innerText</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="操作元素属性">操作元素属性</h4>
<h5 id="获取属性">获取属性</h5>
<h6 id="获取元素自带属性">获取元素自带属性</h6>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.属性名</td>
<td>常见元素自带的属性：src，href，title，alt等，表单元素自带的属性：type，value，disable等，获取class属性时用className获取</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>offset系列属性</p>
<table>
<thead>
<tr>
<th>offset系列属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.offsetParent</td>
<td>返回最近一级的带有定位的父元素，没有则返回body==区别==element.parentNode返回最近一级父亲，不管有没有定位</td>
</tr>
<tr>
<td>element.offsetTop</td>
<td>返回元素相对带有定位父元素上方的偏移，没有则以body为准</td>
</tr>
<tr>
<td>element.oddsetLeft</td>
<td>返回元素相对带有定位父元素左边框的偏移</td>
</tr>
<tr>
<td>element.offsetWidth</td>
<td>返回自身包括==边框，padding，内容区==的宽度，返回数值不带单位</td>
</tr>
<tr>
<td>element.offsetHeight</td>
<td>返回自身包括边框，padding，内容区的宽度，返回数值不带单位</td>
</tr>
</tbody>
</table>
<p>==offset与style的区别==</p>
<table>
<thead>
<tr>
<th>offset</th>
<th>style</th>
</tr>
</thead>
<tbody>
<tr>
<td>可以得到任意样式表中的样式值</td>
<td>只能得到行内样式表中的样式值</td>
</tr>
<tr>
<td>返回的数值没有单位</td>
<td>返回带有单位的字符串</td>
</tr>
<tr>
<td>offsetWidth包括padding+border+width</td>
<td>style.width不包括padding和border</td>
</tr>
<tr>
<td>offsetWidth等属性是只读属性，不能赋值</td>
<td>可读可写</td>
</tr>
<tr>
<td>用于获取元素大小</td>
<td>用于更改元素样式值</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>client系列属性</p>
<table>
<thead>
<tr>
<th>client系列属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.clientTop</td>
<td>返回元素上边框的大小</td>
</tr>
<tr>
<td>element.clientLeft</td>
<td>返回元素左边框的大小</td>
</tr>
<tr>
<td>element.clientWidth</td>
<td>返回自身包括==padding，内容区==的宽度，返回数值不带单位</td>
</tr>
<tr>
<td>element.clientHeight</td>
<td>返回自身包括padding，内容区的宽度，返回数值不带单位</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>scroll系列属性</p>
<table>
<thead>
<tr>
<th>scroll系列属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.scrollTop</td>
<td>返回被卷去的上侧距离（overflow：auto；滚动条），返回数值不带单位，有padding从内容离开padding算起，否则边框下沿开始计算</td>
</tr>
<tr>
<td>element.scrollLeft</td>
<td>返回被卷去的左侧距离，返回数值不带单位</td>
</tr>
<tr>
<td>element.scrollWidth</td>
<td>返回自身不含边框的==实际宽度==（超出的也算进去），返回数值不带单位</td>
</tr>
<tr>
<td>element.scrollHeight  返回自身不含边框的==实际高度==（超出的也算进去），返回数值不带单位</td>
<td></td>
</tr>
</tbody>
</table>
</li>
</ul>
<p>==注意==：</p>
<ol>
<li>元素被卷去的头部距离：element.scrollTop获取</li>
<li>页面被卷去的头部距离，window.pageYoffset获取</li>
<li>说明垂直滚动条滚动到底：scrollHeight-scrollTop == clientHright         //用于判断用户是否阅读完协议</li>
</ol>
<h6 id="获取元素自定义属性">获取元素自定义属性</h6>
<p>element.getAttribute(&lsquo;属性名&rsquo;)</p>
<h5 id="设置属性">设置属性</h5>
<h6 id="设置元素自带属性">设置元素自带属性</h6>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.属性名 = &lsquo;';</td>
<td></td>
</tr>
</tbody>
</table>
<h6 id="设置元素自定义属性">设置元素自定义属性</h6>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.setAttribute(&lsquo;属性名&rsquo;，&lsquo;值&rsquo;)</td>
<td></td>
</tr>
</tbody>
</table>
<p>==注意==：修改class属性时</p>
<ol>
<li>用element.==className== &lsquo;';</li>
<li>用element.setAttribute('==class==&rsquo;,'');</li>
</ol>
<p>==注意==：H5规定自定义属性data开头作为属性名并且赋值：<div data-index='1'></div></p>
<h5 id="移除属性">移除属性</h5>
<h6 id="移除元素自定义属性">移除元素自定义属性</h6>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.removeAttribute('')</td>
<td></td>
</tr>
</tbody>
</table>
<h5 id="判断是否有该属性">判断是否有该属性</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.hasAttribute()</td>
<td>判断元素属性，而不是css样式表中的样式属性</td>
</tr>
</tbody>
</table>
<h4 id="操作元素样式">操作元素样式</h4>
<h5 id="获取样式属性">获取样式属性</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>getComputedStyle(element).属性</td>
<td>可以获取css样式表的样式，需要两个参数1.需要获取样式的元素2.可传递一个伪元素，一般都传null，该方法会返回一个对象，对象中封装了当前元素对应的样式。</td>
</tr>
<tr>
<td>element.style.样式名</td>
<td>只能获取行内样式（这里的style就是元素的一个属性，将将样式名修改为驼峰命名）</td>
</tr>
</tbody>
</table>
<h5 id="设置样式属性">设置样式属性</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.className=&rsquo;'</td>
<td>会覆盖原来的class，用 += 可以防止覆盖，注意要加空格className += ‘ b2’</td>
</tr>
<tr>
<td>element.style.样式名=&lsquo;值&rsquo;</td>
<td>添加的是内联样式，所以如果在样式中写了important，js就无法修改了（这里的style就是元素的一个属性）</td>
</tr>
</tbody>
</table>
<h3 id="动画函数的封装">动画函数的封装</h3>
<h4 id="动画函数原理">动画函数原理</h4>
<p>定义一个setInterval的定时器，函数里对元素的样式进行操作</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">time</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">div</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">&gt;=</span> <span class="mi">400</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">time</span><span class="p">);</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">div</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="nx">div</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">+</span> <span class="mi">1</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">},</span> <span class="mi">1</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="动画函数简单封装">动画函数简单封装</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>点击开炮<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">span</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">btn</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">);</span>
        <span class="nx">animate</span><span class="p">(</span><span class="nx">div</span><span class="p">,</span> <span class="mi">300</span><span class="p">);</span>
        
        <span class="c1">//obj目标元素，target目标位置
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">animate</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//防止速度加快先清除以前的定时器
</span><span class="c1"></span>            <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">time</span><span class="p">);</span>
            <span class="c1">//给不同的元素指定不同的定时器
</span><span class="c1"></span>            <span class="nx">obj</span><span class="p">.</span><span class="nx">time</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">&gt;=</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">time</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">obj</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">+</span> <span class="mi">1</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span> <span class="mi">1</span><span class="p">)</span>
        <span class="p">};</span>
        <span class="nx">btn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
            <span class="c1">//bug:当不断点击按钮元素速度会越来越快
</span><span class="c1"></span>            <span class="c1">//解决方案：元素只有一个定时器执行
</span><span class="c1"></span>            <span class="nx">animate</span><span class="p">(</span><span class="nx">span</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>
        <span class="p">})</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">dir</span><span class="p">(</span><span class="nx">div</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="缓动动画函数封装">缓动动画函数封装</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">animate</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">target</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">//先清除以前的定时器
</span><span class="c1"></span>    <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">time</span><span class="p">);</span>
    <span class="c1">//给不同的元素指定不同的定时器
</span><span class="c1"></span>    <span class="nx">obj</span><span class="p">.</span><span class="nx">time</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="c1">//把步长值,上下取整看正负值
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="p">(</span><span class="nx">target</span> <span class="o">-</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span><span class="p">)</span> <span class="o">/</span> <span class="mi">10</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">x</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">x</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">==</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">time</span><span class="p">);</span>
            <span class="c1">//回调函数
</span><span class="c1"></span>            <span class="c1">// if (callback) {
</span><span class="c1"></span>            <span class="c1">//     callback();
</span><span class="c1"></span>            <span class="c1">// }
</span><span class="c1"></span>            <span class="nx">callback</span> <span class="o">&amp;&amp;</span> <span class="nx">callback</span><span class="p">();</span><span class="c1">//&amp;&amp;具有短路的功能
</span><span class="c1"></span>        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">obj</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span> <span class="o">+</span> <span class="nx">x</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">},</span> <span class="mi">15</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="三种动态创建元素的区别">三种动态创建元素的区别</h3>
<ol>
<li>
<p>document.write()会导致文档流重绘</p>
</li>
<li>
<p>element.innerHTML = ''</p>
</li>
</ol>
<ul>
<li>
<p>拼接字符串，很慢</p>
<p>解决方法：存入数组中，一次性渲染，很快</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">inner</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.inner&#39;</span><span class="p">);</span>
        <span class="nx">inner</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&lt;a href=&#34;#&#34;&gt;百度&lt;/a&gt;&#39;</span><span class="p">;</span>
        <span class="c1">// 创建多个字符串拼接的时候特别慢效率低
</span><span class="c1"></span>        <span class="c1">// 但是用数组的形式拼接是最快的
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="kd">var</span> <span class="nx">date1</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">1000</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;&lt;a href=&#34;#&#34;&gt;9&lt;/a&gt;&#39;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">inner</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span><span class="c1">//数组转字符串
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">date2</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">date2</span> <span class="o">-</span> <span class="nx">date1</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<ol start="3">
<li>
<p>var child  = document.createElement();</p>
<p>node.appendChild(child);</p>
<p>比2慢，比1快</p>
</li>
</ol>
<h3 id="事件">事件</h3>
<h4 id="鼠标事件">鼠标事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onclick</td>
<td>点击</td>
</tr>
<tr>
<td>onmouseover/onmouseenter</td>
<td>移入</td>
</tr>
<tr>
<td>onmouseout/onmouseleave</td>
<td>移出</td>
</tr>
<tr>
<td>onmousedown</td>
<td>按下</td>
</tr>
<tr>
<td>onmouseup</td>
<td>松开</td>
</tr>
<tr>
<td>onmousemove</td>
<td>移动</td>
</tr>
<tr>
<td>onwheel</td>
<td>鼠标滚轮，e.datail（火狐）或者e.wheelDelta</td>
</tr>
</tbody>
</table>
<p>==注意==：mouseover和mouseenter的区别：mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)</p>
<h4 id="键盘事件">键盘事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onkeyup</td>
<td>松开，不区分大小写</td>
</tr>
<tr>
<td>onkeydown</td>
<td>会在文字还没进入文本框前就添加事件，不区分大小写，一直按着某个按键不松手，事件会连续触发，第一次和第二次之间会间隔稍微长一点，其他会特别快</td>
</tr>
<tr>
<td>onkeypress</td>
<td>不识别功能按键，如ctrl。区分大小写，触发比onkeydown慢</td>
</tr>
</tbody>
</table>
<h4 id="表单事件">表单事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onfocus</td>
<td>获得焦点，无冒泡</td>
</tr>
<tr>
<td>onblur</td>
<td>失去焦点，无冒泡</td>
</tr>
<tr>
<td>onchange</td>
<td>在元素值改变时触发，适用于input，textarea，select元素</td>
</tr>
<tr>
<td>onselect</td>
<td>在文本框内容被选中时触发，适用于单选框，多选框</td>
</tr>
</tbody>
</table>
<h4 id="编辑事件">编辑事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>oncopy</td>
<td>在拷贝时触发</td>
</tr>
<tr>
<td>onselect</td>
<td>在文本框内容选中时触发，return false让用户无法选中</td>
</tr>
<tr>
<td>oncontentmenu</td>
<td>鼠标右击触发，用e.preventDefault()来禁止鼠标右键</td>
</tr>
</tbody>
</table>
<h4 id="页面事件">页面事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onload</td>
<td>等待文档流加载完成后触发</td>
</tr>
<tr>
<td>onbeforeunload</td>
<td>即将离开页面（刷新或关闭）时触发</td>
</tr>
</tbody>
</table>
<h4 id="滚动事件">滚动事件</h4>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onscroll</td>
<td>滚动条滚动触发该事件，给添加了overflow：auto的元素绑定</td>
</tr>
</tbody>
</table>
<h4 id="传统事件">传统事件</h4>
<h5 id="注册">注册</h5>
<p>element.事件类型 = function(){}</p>
<h5 id="删除">删除</h5>
<p>element.事件类型 = null</p>
<h4 id="事件监听器">事件监听器</h4>
<h5 id="区别传统">区别传统</h5>
<p>相比传统的onclick=function(){}，addEventListener可以让同一元素同一事件可以注册多个监听器，按注册顺序依此执行，而传统的只能写一个，如果写了多个以最后一个为准</p>
<h5 id="注册-1">注册</h5>
<table>
<thead>
<tr>
<th>API</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.addEventListener(''&quot;,function(e){},[true/false])</td>
<td>第一个参数事件类型，不用加on,第三个参数默认false，冒泡阶段,true，捕获阶段</td>
</tr>
</tbody>
</table>
<h5 id="删除-1">删除</h5>
<table>
<thead>
<tr>
<th>API事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>element.removeEventListener(''&quot;,函数名,[true/false])</td>
<td>第一个参数事件类型，不用加on,第三个参数默认false，冒泡阶段,true，捕获阶段</td>
</tr>
</tbody>
</table>
<h4 id="事件对象">事件对象</h4>
<h5 id="事件对象属性">事件对象属性</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>e.type</td>
<td>事件类型</td>
</tr>
<tr>
<td>e.target</td>
<td>真正触发事件的那个元素（事件委托：ul和li利用冒泡只需给ul添加点击事件，用e.target获取点击的li）</td>
</tr>
</tbody>
</table>
<h5 id="事件对象方法">事件对象方法</h5>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>e.preventDefault()</td>
<td>阻止默认行为</td>
</tr>
<tr>
<td>e.stopPropagation()</td>
<td>阻止事件冒泡</td>
</tr>
</tbody>
</table>
<h5 id="鼠标事件对象">鼠标事件对象</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>e.pageX/Y</td>
<td>相对于文档页面（图片跟随鼠标移动，图片要绝对定位）</td>
</tr>
<tr>
<td>e.clientX/Y</td>
<td>相对于浏览器的可视窗口</td>
</tr>
<tr>
<td>e.screenX/Y</td>
<td>相对于电脑屏幕</td>
</tr>
<tr>
<td>e.offsetX/Y</td>
<td>相对于带有定位的父盒子的xy坐标</td>
</tr>
</tbody>
</table>
<h5 id="键盘事件对象">键盘事件对象</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>e.altKey</td>
<td></td>
</tr>
<tr>
<td>e.ctrlKey</td>
<td></td>
</tr>
<tr>
<td>e.shiftKey</td>
<td>是否按下shift</td>
</tr>
<tr>
<td>e.keyCode</td>
<td>键盘输入的ascll码</td>
</tr>
</tbody>
</table>
<h5 id="dom事件流">DOM事件流</h5>
<p>传统和监听器一般都是得到冒泡阶段，把addEventListener第三个参数改为true则能得到捕获阶段</p>
<h6 id="捕获阶段">捕获阶段</h6>
<p>document=&gt;html=&gt;body=&gt;father=&gt;son（如果father有监听事件，先执行father的，再执行son的）</p>
<h6 id="冒泡阶段">冒泡阶段</h6>
<p>于捕获相反，取消冒泡：e.cancelBubble=true，点击了子元素，点击事件冒泡到父元素</p>
<p>==注意==：onblur，onfocus，onmouseenter，onmousemove没有冒泡</p>
<h5 id="事件委托">事件委托</h5>
<p>原理：将事件监听器设置在父节点上，利用冒泡原理影响每个子节点，用e.target获取按下的那个元素</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>2342<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>2342<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>2342<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>2342<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>2342<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">ul</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;ul&#39;</span><span class="p">);</span>
        <span class="nx">ul</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//排他
</span><span class="c1"></span>            <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">ul</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">ul</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c1">//得到你点击的小li
</span><span class="c1"></span>            <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="s1">&#39;pink&#39;</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="bom">BOM</h2>
<p>Window对象是浏览器的顶级对象</p>
<ol>
<li>它是JS访问浏览器窗口的一个接口</li>
<li>它是一个全局对象。定义在作用域中的变量，函数会变成window对象的属性和方法</li>
</ol>
<p>==注意==：window下的一个特殊属性：window.name</p>
<h3 id="window对象">window对象</h3>
<p>==浏览器内核常见模块：==</p>
<p>js引擎模块、html，css文档解析模块、DOM\CSS模块、布局和渲染模块、定时器模块、事件响应模块、网络请求模块。</p>
<h4 id="location属性">location属性</h4>
<p>location是一个对象，用于获取或设置窗体的URL，并且可以用于解析，如果直接打印location，返回的是地址栏的信息</p>
<ul>
<li>
<p>属性</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>window.location.href</td>
<td>返回当前页面的URL</td>
</tr>
<tr>
<td>location.host</td>
<td>返回主机域名</td>
</tr>
<tr>
<td>location.port</td>
<td>返回端口号</td>
</tr>
<tr>
<td>location.pathname</td>
<td>返回路径</td>
</tr>
<tr>
<td>location.hash</td>
<td>返回片段 #后面的内容 常见于链接 锚点</td>
</tr>
<tr>
<td>window.lacation.search</td>
<td>返回参数：？键=值（var arr=substr（1）.split（“=”））</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>
<p>方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>assign()</td>
<td>与改变href属性一样可以跳转页面，可以后退，和直接修改location一样</td>
</tr>
<tr>
<td>replace()</td>
<td>替换当前页，不记录历史，无法后退</td>
</tr>
<tr>
<td>reload()</td>
<td>重新加载页面，若参数为true会强制刷新，相当于浏览器上的刷新按钮</td>
</tr>
</tbody>
</table>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">btn</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">);</span>
        <span class="nx">btn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">location</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="s1">&#39;案例/login.html&#39;</span><span class="p">);</span>
            <span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;案例/login.html&#39;</span><span class="p">);</span>
            <span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="navigator属性">navigator属性</h4>
<p>包含有关浏览器的信息，常用window.navigator.userAgent,返回由客户机发送服务器的user-agent头部的值，用正则进行匹配</p>
<p>==注意==：</p>
<ol>
<li>ie11已经不能用useragent判断浏览器了，但是ie中有ActiveXObject对象属性，通过判断页面一这个属性来知道是不是ie浏览器</li>
</ol>
<h4 id="histroy属性">histroy属性</h4>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>back()</td>
<td>后退，相当于浏览器上的按钮</td>
</tr>
<tr>
<td>forward()</td>
<td>前进</td>
</tr>
<tr>
<td>go(1/-1)</td>
<td>1前进一个页面，-1后退一个页面，-2后退两个页面</td>
</tr>
<tr>
<td>length</td>
<td>当此访问的链接的数量</td>
</tr>
</tbody>
</table>
<h4 id="其他常见属性">其他常见属性</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>window.page（Y/X）offset</td>
<td>获取页面卷去的头部/左侧</td>
</tr>
<tr>
<td>window.scroll(x,y)</td>
<td>x,y不加单位，滚定至文档中的特定位置</td>
</tr>
<tr>
<td>window.innerWidth</td>
<td>返回窗口宽度，无单位</td>
</tr>
</tbody>
</table>
<h3 id="window事件">window事件</h3>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>window.onload=funtion(){}/window.addEventListenter(&lsquo;load&rsquo;,function(){})</td>
<td>在文档内容（css，js，html）全部加载完成后触发</td>
</tr>
<tr>
<td>window.onDOMContentLoaded</td>
<td>在DOM加载完成后就触发</td>
</tr>
<tr>
<td>window.onresize</td>
<td>调整窗口大小时触发</td>
</tr>
</tbody>
</table>
<h3 id="定时器">定时器</h3>
<h4 id="settimeout">setTimeout</h4>
<ul>
<li>
<p>创建</p>
<p>会返回一个定时器ID给变量</p>
<p>var time = window.setTimeout(回调函数，[延迟的毫秒数])//在定时器到期后执行回调函数，==只调用一次==</p>
</li>
<li>
<p>清除</p>
<p>clearTimeout(定时器ID)</p>
</li>
</ul>
<h4 id="setinterval">setInterval</h4>
<ul>
<li>
<p>创建</p>
<p>var time = window.setInterval(回调函数，[延迟的毫秒数])//每隔延迟的时间就调用一次，==会重复调用==</p>
</li>
<li>
<p>清除</p>
<p>clearInterval(定时器ID)，可以接收任何参数，如果参数是undefined或者null则什么也不做</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">setInterval</span><span class="p">(</span><span class="nx">fn1</span><span class="p">,</span><span class="mi">500</span><span class="p">)</span>
        <span class="nx">setInterval</span><span class="p">(</span><span class="nx">fn1</span><span class="p">(),</span><span class="mi">500</span><span class="p">)</span><span class="c1">//如果没有返回的函数则只执行一次  1 22222.。。
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">fn1</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
            <span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="this指向问题">this指向问题</h3>
<ol>
<li>在全局作用域，定时器，普通函数中this指向window，==注意==：箭头函数中的this指向上下文对象</li>
<li>方法中的this指向调用者</li>
<li>构造函数中的this指向实例</li>
</ol>
<h3 id="js执行对列">JS执行对列</h3>
<p>同步任务在主线程执行，形成一个执行栈。当有异步任务时，如ajax，DOM待触发事件，定时器。放入异步进程处理，触发后放入任务队列（异步队列），等待主线程执行完毕后，通过事件循环机制来任务队列中取出任务执行</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97.png" /></p>
<h1 id="js高级">JS高级</h1>
<h2 id="类和对象">类和对象</h2>
<ul>
<li>
<p>关键字：class</p>
<p>注意:类中所有函数不需要加function关键字，多个方法间不加逗号分隔.</p>
</li>
<li>
<p>方法中的this指向：方法的调用者</p>
</li>
</ul>
<h3 id="构造器">构造器</h3>
<ul>
<li>
<p>关键字：constructor()</p>
</li>
<li>
<p>作用:用于传递参数，返回实例对象，new生成对象实例时自动调用。</p>
<p>注意：如果未定义会自动创建一个constructor()</p>
</li>
<li>
<p>this指向：实例对象</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Star</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">sing</span><span class="p">(</span><span class="nx">song</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">song</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">18</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">zxy</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;张学友&#39;</span><span class="p">)</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ldh</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">ldh</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
        <span class="nx">ldh</span><span class="p">.</span><span class="nx">sing</span><span class="p">(</span><span class="s1">&#39;冰雨&#39;</span><span class="p">)</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>注意：</p>
<p>this的指向问题</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>
        唱歌
    <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">that</span><span class="p">;</span>
        <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
            <span class="c1">//构造器里面的this指向实例对象
</span><span class="c1"></span>            <span class="nx">constructor</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
                <span class="c1">// this.sing();
</span><span class="c1"></span>                <span class="k">this</span><span class="p">.</span><span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">);</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">btn</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">sing</span><span class="p">;</span><span class="c1">//因为这个按钮调用了这个函数
</span><span class="c1"></span>            <span class="p">}</span>
            <span class="c1">//这个方法里的this 指向的是btn 这个按钮
</span><span class="c1"></span>            <span class="nx">sing</span><span class="p">()</span> <span class="p">{</span>
                <span class="c1">// console.log(this.uname);
</span><span class="c1"></span>                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">that</span><span class="p">.</span><span class="nx">uname</span><span class="p">);</span> <span class="c1">//that 里面存储的是constructor里面的this
</span><span class="c1"></span>            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">father</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Father</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="类的继承">类的继承</h2>
<h3 id="关键字">关键字</h3>
<ul>
<li>
<h3 id="entends">entends</h3>
</li>
<li>
<p>注意：ES6中类没有变量提升，必须先定义类，才能实例化</p>
</li>
</ul>
<h3 id="继承属性">继承属性</h3>
<p>调用父类构造函数：</p>
<ul>
<li>关键字：super(x,y)</li>
</ul>
<p>注意：在constructor中调用，且必须在子元素的this之前调用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">sum</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">money</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">100</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">Father</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
                <span class="kr">super</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">son</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
        <span class="nx">son</span><span class="p">.</span><span class="nx">money</span><span class="p">();</span>
        <span class="nx">son</span><span class="p">.</span><span class="nx">sum</span><span class="p">();</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="继承方法">继承方法</h3>
<ul>
<li>
<p>子类实例会自动继承父类的方法</p>
</li>
<li>
<p>在子类中调用父类方法：</p>
<ul>
<li>关键字：super.父类方法名()</li>
</ul>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        class Father {
            say() {
                return &#39;我是爸爸&#39;
            }
        }
        class Son extends Father{
            say() {
                console.log(super.say()+&#39;的儿子&#39;); 
            }
        }
        var son = new Son();
        son.say();
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<h3 id="扩展子类的方法">扩展子类的方法</h3>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">sum</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>

            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">Father</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
                <span class="kr">super</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">sub</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">son</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
        <span class="nx">son</span><span class="p">.</span><span class="nx">sum</span><span class="p">();</span>
        <span class="nx">son</span><span class="p">.</span><span class="nx">sub</span><span class="p">();</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="构造函数和对象">构造函数和对象</h2>
<ol>
<li>
<p>利用构造函数创建对象，首字母要大写（之前还有利用new Object(), 字面量的方法创建对象）</p>
</li>
<li>
<p>通过this添加实例成员和实例方法</p>
</li>
<li>
<p>构造函数名.属性名 || 方法名，添加静态成员和静态方法</p>
<p>==注意==：静态成员和方法只能通过构造函数来访问</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">function</span> <span class="nx">Star</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span><span class="c1">//实例成员
</span><span class="c1"></span>            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">sing</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我会唱歌&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">13</span><span class="p">);</span>
        <span class="nx">Star</span><span class="p">.</span><span class="nx">sex</span> <span class="o">=</span> <span class="s1">&#39;男&#39;</span><span class="p">;</span><span class="c1">//静态成员
</span><span class="c1"></span>        <span class="nx">Star</span><span class="p">.</span><span class="nx">dance</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;dance&#39;</span><span class="p">);</span>
        <span class="p">}</span><span class="c1">//静态方法
</span><span class="c1"></span>        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Star</span><span class="p">.</span><span class="nx">sex</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="构造函数原型prototype原型对象">构造函数原型：prototype（原型对象）</h3>
<ul>
<li>
<p>构造函数通过原型分配的函数是所有对象所共享的</p>
</li>
<li>
<p>每一个构造函数都有一个prototype属性，这个属性就是一个对象，它所拥有的所有属性和方法，都会被构造函数所拥有，包函constructor指回构造函数，和proto属性指向父级的prototype</p>
</li>
<li>
<p>每一个实例对象也都有一个_proto_属性，也就是对象原型，指向构造函数的prototype</p>
<p>注意：一般公共的属性定义到构造函数里面，公共的方法放入原型对象中</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">function</span> <span class="nx">Star</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="c1">//Star.prototype被对象赋值覆盖了，所以没有了constructor属性
</span><span class="c1"></span>        <span class="nx">Star</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="o">:</span> <span class="nx">Star</span><span class="p">,</span><span class="c1">//重新将构造器指回构造函数
</span><span class="c1"></span>            <span class="nx">sing</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我会唱歌&#39;</span><span class="p">);</span>
            <span class="p">},</span>
            <span class="nx">movie</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我演电影&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="对象原型_proto_">对象原型：<em>proto</em></h3>
<ul>
<li>每个实例对象都会有一个属性proto向构造函数的prototype，但最终又通过prototype里的constructor指回构造函数</li>
<li>每一个构造函数的prototype（原型对象）中也有一个proto属性，指向父级构造函数的prototype</li>
</ul>
<h3 id="方法查找规则">方法查找规则</h3>
<ol>
<li>先看实例对象身上有没有a方法</li>
<li>如果没有，通过proto指向去构造函数的prototype里找有没有</li>
<li>如果没有，通过prototype执向父级构造函数的prototype里找有没有，直到找到object为止</li>
</ol>
<p>注意：</p>
<ol>
<li>通过proto到prototype中找到的属性用person.hasOwnProperty()去查找属性返回false，通过in查找返回true</li>
<li>在打印对象时会自动掉用Object中的toString()方法，如果不想用Object中的方法，可以给对象添加toString()方法</li>
</ol>
<h3 id="constructor">constructor</h3>
<ul>
<li>
<p>proto中有一个constructor，最终通过prototype指回构造函数</p>
</li>
<li>
<p>prototype中有一个constructor，指回构造函数</p>
<p>注意：如果prototype被覆盖了，需要重新将constructor：构造函数名（重新指回构造函数）</p>
</li>
</ul>
<h3 id="原型链">原型链</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE.png"
        title="原型链" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">        <span class="n">function</span> <span class="nf">Star</span><span class="o">(</span><span class="n">uname</span><span class="o">,</span> <span class="n">age</span><span class="o">)</span> <span class="o">{</span>
            <span class="k">this</span><span class="o">.</span><span class="na">uname</span> <span class="o">=</span> <span class="n">uname</span><span class="o">;</span>
            <span class="k">this</span><span class="o">.</span><span class="na">age</span> <span class="o">=</span> <span class="n">age</span><span class="o">;</span>
        <span class="o">}</span>
        <span class="c1">//Star.prototype被对象赋值覆盖了，所以没有了constructor属性
</span><span class="c1"></span>        <span class="n">Star</span><span class="o">.</span><span class="na">prototype</span> <span class="o">=</span> <span class="o">{</span>
            <span class="n">constructor</span><span class="o">:</span> <span class="n">Star</span><span class="o">,</span>
            <span class="n">sing</span><span class="o">:</span> <span class="n">function</span> <span class="o">()</span> <span class="o">{</span>
                <span class="n">console</span><span class="o">.</span><span class="na">log</span><span class="o">(</span><span class="err">&#39;</span><span class="n">我会唱歌</span><span class="err">&#39;</span><span class="o">);</span>
            <span class="o">},</span>
            <span class="n">movie</span><span class="o">:</span> <span class="n">function</span> <span class="o">()</span> <span class="o">{</span>
                <span class="n">console</span><span class="o">.</span><span class="na">log</span><span class="o">(</span><span class="err">&#39;</span><span class="n">我演电影</span><span class="err">&#39;</span><span class="o">);</span>
            <span class="o">}</span>
        <span class="o">}</span>
        <span class="n">var</span> <span class="n">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Star</span><span class="o">(</span><span class="err">&#39;</span><span class="n">刘德华</span><span class="err">&#39;</span><span class="o">,</span> <span class="n">12</span><span class="o">);</span>
        <span class="n">console</span><span class="o">.</span><span class="na">log</span><span class="o">(</span><span class="n">Star</span><span class="o">.</span><span class="na">prototype</span><span class="o">);</span>
        <span class="n">console</span><span class="o">.</span><span class="na">log</span><span class="o">(</span><span class="n">Star</span><span class="o">.</span><span class="na">prototype</span><span class="o">.</span><span class="na">__proto__</span> <span class="o">===</span> <span class="n">Object</span><span class="o">.</span><span class="na">prototype</span><span class="o">);</span>
        <span class="n">console</span><span class="o">.</span><span class="na">log</span><span class="o">(</span><span class="n">Object</span><span class="o">.</span><span class="na">prototype</span><span class="o">.</span><span class="na">__proto__</span><span class="o">);</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>
<p>Object是对象也是函数，Object.proto===Function.prototype，Object是Function的实例</p>
</li>
<li>
<p>function也是==Function(构造函数)==的实例 new Function()，Star.proto-&gt;Function.prototype</p>
</li>
<li>
<p>Function也是Function的实例，Function.proto = Function.prototype</p>
</li>
<li>
<p>Star.prototype.proto-&gt;Object.prototype</p>
</li>
<li>
<p>ldh.proto-&gt;Star.prototype,Star.prototype.proto-&gt;Object.prototype</p>
</li>
</ol>
<h3 id="成员查找机制">成员查找机制</h3>
<ol>
<li>当访问一个对象的属性（包括方法时），首先查找这个对象自身有没有该属性</li>
<li>如果没有就查找它的原型（也就是proto指向的prototype原型对象）</li>
<li>如果还没有就查找原型对象的原型</li>
<li>以此类推直到Object为止（null）</li>
<li>proto对象原型的意义就在于为对象成员查找机制提供一个方向路线</li>
</ol>
<h3 id="instance-of">instance of</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE2.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE2.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE2.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE2.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8E%9F%E5%9E%8B%E9%93%BE2.png"
        title="原型链2" /></p>
<p>通俗一点来讲，<code>instanceof</code>的判断规则是：<strong><code>instanceof</code>会检查整个原型链，将沿着A的<code>__proto__</code>这条线来一直找，同时沿着B的<code>prototype</code>这条线来一直找，直到能找到同一个引用，即同一个对象，那么就返回<code>true</code>。如果找到终点还未重合，则返回<code>false</code></strong>。即上图中的 <code>f1</code>&ndash;&gt;<code>__proto__</code> 和 <code>Foo</code>&ndash;&gt;<code>prototype</code> 指向同一个对象，<code>console.log(f1 instanceof Foo)</code>为<code>true</code>。</p>
<h3 id="this指向">this指向</h3>
<ol>
<li>在构造函数中，里面的this指向的是实例对象</li>
<li>prototype中的this也指向实例对象，因为实例对象调用原型对象里面的方法</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">that</span><span class="p">;</span>

        <span class="kd">function</span> <span class="nx">Star</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="c1">//Star.prototype被对象赋值覆盖了，所以没有了constructor属性
</span><span class="c1"></span>        <span class="nx">Star</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">constructor</span><span class="o">:</span> <span class="nx">Star</span><span class="p">,</span>
            <span class="nx">sing</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我会唱歌&#39;</span><span class="p">);</span>
            <span class="p">},</span>
            <span class="nx">movie</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我演电影&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span><span class="s1">&#39;12&#39;</span><span class="p">);</span>
        <span class="nx">ldh</span><span class="p">.</span><span class="nx">sing</span><span class="p">();</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">that</span> <span class="o">===</span> <span class="nx">ldh</span><span class="p">);</span><span class="c1">//true
</span><span class="c1"></span>        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Star</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="改变this指向">改变this指向</h2>
<h3 id="this指向的4种形式">this指向的4种形式</h3>
<ol>
<li>一般函数，this指向全局对象window</li>
<li>在严格模式下，为undefined</li>
<li>对象的方法里调用，this指向调用该方法的对象</li>
<li>构造函数里的this，指向创建出来的实例</li>
<li>箭头函数中this指向上下文</li>
</ol>
<h3 id="call">call</h3>
<ul>
<li>第一个参数：改变this指向</li>
<li>第二个参数：实参</li>
<li>使用时候会自动执行函数</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//A.call( B,x,y )：就是把A的函数放到B中运行，x 和 y 是A方法的参数。
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">obj</span><span class="o">=</span><span class="p">{}</span>
<span class="kd">function</span> <span class="nx">fun</span><span class="p">(){}</span>
<span class="nx">fun</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span>  
</code></pre></td></tr></table>
</div>
</div><h3 id="apply">apply</h3>
<ul>
<li>第一个参数：改变this指向，在函数运行时才会改变this指向</li>
<li>第二个参数：数组（里面为实参）</li>
<li>使用时候会自动执行函数</li>
<li>主要应用：Math.max.apply(Math,arr)//这里this的指向还是Math不过可以比较数组中的最大值</li>
</ul>
<p>==注意==：</p>
<ol>
<li>call和apply这两个方法都是函数对象的方法，需要通过函数对象来调用</li>
<li>调用call和apply会将一个对象指定为第一个参数，此时这个对象会称为函数执行时的this</li>
<li>call（obj,2,3）方法可以将实参在对象之后依次传递,apply需要将实参封装到数组中统一传递</li>
</ol>
<h3 id="bind">bind</h3>
<ul>
<li>第一个参数：改变this指向</li>
<li>第二个参数之后：实参</li>
<li>返回值为一个新的函数</li>
<li>使用的时候需要手动调用下返回 的新函数（==不会自动执行==）</li>
</ul>
<h2 id="原型继承">原型继承</h2>
<h3 id="继承属性-1">继承属性</h3>
<p>通过构造函数+原型对象模拟实现继承，称为组合继承</p>
<p><strong>原理</strong>：同call()把父类型的this改为子类型的this</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//通过借用父构造函数来继承属性
</span><span class="c1"></span>        <span class="c1">//1。父构造函数
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">Father</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//this指向父构造函数的对象实例
</span><span class="c1"></span>            <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="c1">//2.子构造函数
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">Son</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//this指向子构造函数的对象实例，在Father执行时指定this值，这个this是子构造函数中的
</span><span class="c1"></span>            <span class="nx">Father</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">12</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ldh</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="继承方法-1">继承方法</h3>
<p>直接给构造函数添加的是静态方法，给构造函数的prototype添加的是实例方法</p>
<p><strong>原理</strong>：创建一个父类的实例，让子类的原型对象执向这个实例所在的内存空间，但是子类的prototype里的constructor被覆盖了，需要重新指向子类构造函数，这样就能通过父类实例的中的proto找到父类中的方法，且在子类中添加自己的私有方法也不会影响父类。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//通过借用父构造函数来继承属性
</span><span class="c1"></span>        <span class="c1">//1。父构造函数
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">Father</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//this指向父构造函数的对象实例
</span><span class="c1"></span>            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">Father</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">money</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">100000</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="c1">//2.子构造函数
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">Son</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//this指向子构造函数的对象实例
</span><span class="c1"></span>            <span class="nx">Father</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="c1">//Son.prototype = Father.prototype;
</span><span class="c1"></span>        <span class="nx">Son</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Father</span><span class="p">();</span>
		<span class="nx">Son</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">constructor</span><span class="o">=</span><span class="nx">Son</span>
        <span class="nx">Son</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">exam</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;孩子要考试&#39;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="c1">// var zxy = new Father(&#39;张学友&#39;, 12)
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">12</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ldh</span><span class="p">);</span>
        <span class="c1">// console.log(zxy);
</span></code></pre></td></tr></table>
</div>
</div><h3 id="扩展内置对象">扩展内置对象</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">sum</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">sum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">sum</span> <span class="o">+=</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
            <span class="p">}</span>
            <span class="k">return</span> <span class="nx">sum</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">33</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr1</span><span class="p">.</span><span class="nx">sum</span><span class="p">());</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="web-workers">Web Workers</h2>
<ol>
<li>主线程才能操作dom，web workers可以将大计算量的代码另外开一个线程去计算，从而防止冻结用户界面</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;number&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;btn&#34;</span><span class="p">&gt;</span>计算<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#btn&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">number</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#number&#39;</span><span class="p">).</span><span class="nx">value</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span>
            <span class="c1">//创建一个Worker对象
</span><span class="c1"></span>            <span class="kd">let</span> <span class="nx">worker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Worker</span><span class="p">(</span><span class="s1">&#39;worker.js&#39;</span><span class="p">)</span>
            <span class="c1">//接收worker传过来的数据函数
</span><span class="c1"></span>            <span class="nx">worker</span><span class="p">.</span><span class="nx">onmessage</span><span class="o">=</span><span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span>
            <span class="p">}</span>
            <span class="c1">//向worker发送消息
</span><span class="c1"></span>            <span class="nx">worker</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span>
        <span class="p">})</span>
    <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">onmessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">postMessage</span><span class="p">(</span><span class="nx">f</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">))</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">f</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">n</span> <span class="o">&lt;=</span> <span class="mi">2</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="nx">f</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">f</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">)</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><h3 id="缺点">缺点</h3>
<ol>
<li>慢</li>
<li>不能跨域加载js</li>
<li>worker内代码不能访问DOM</li>
<li>浏览器兼容问题</li>
</ol>
<h2 id="函数">函数</h2>
<ol>
<li>函数也是一个对象</li>
<li>函数不会检查实参类型和数量，少了则为undefined，多了则忽略</li>
<li>return后的语句不会执行，return；后面不跟值相当于返回undefined，不写return也返回undefined。使用return结束整个函数</li>
<li>函数对象也可以return</li>
<li>实参会存到arguments（伪数组）中，函数中不定义形参也能使用，arguments有一个属性callee，是当前正在执行得函数对象</li>
</ol>
<h3 id="定义">定义</h3>
<ol>
<li>
<p>命名函数</p>
<p>function fn(){ }</p>
</li>
<li>
<p>匿名函数</p>
<p>var fun = function() {}</p>
</li>
<li>
<p>new Function(&lsquo;参数1&rsquo;，‘参数2’，‘函数体’)</p>
<p>var f = new Function(“xxxx	”);</p>
</li>
</ol>
<p>==注意==：所有函数都是Function的实例</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/function.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/function.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/function.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/function.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/function.png"
        title="function" /></p>
<h3 id="执行上下文栈">执行上下文栈</h3>
<ol>
<li>在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象</li>
<li>在全局执行上下文（window）确定后，将其添加到栈中</li>
<li>在函数执行上下文创建后，将其添加到栈中（压栈）</li>
<li>在当前函数执行完后，将栈顶的对象移除（出栈）</li>
<li>当所有的代码执行完后，栈中只剩下window</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//进入全局执行上下文
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span>
<span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">){</span>
	<span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">5</span>
	<span class="nx">foo</span><span class="p">(</span><span class="nx">x</span><span class="o">+</span><span class="nx">b</span><span class="p">)</span>
<span class="p">}</span>
<span class="c1">//进入foo执行行下文
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">y</span><span class="p">){</span>
	<span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="mi">5</span>
	<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="o">+</span><span class="nx">c</span><span class="o">+</span><span class="nx">y</span><span class="p">)</span>
<span class="p">}</span>
<span class="c1">//进入bar函数执行上下文
</span><span class="c1"></span><span class="nx">bar</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="调用方式和this指向">调用方式和this指向</h3>
<ul>
<li>解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象</li>
</ul>
<ol>
<li>
<p>普通函数</p>
<p>fn();//实际上是windows.fn()</p>
<p>this指向windows</p>
</li>
<li>
<p>对象的方法</p>
<p>obj.xxx();</p>
<p>this指向对象</p>
</li>
<li>
<p>构造函数里的方法</p>
<p>function xxx(){}</p>
<p>new xxx();</p>
<p>this指向实例，包括构造函数的prototype原型对象里的this也指向实例</p>
</li>
<li>
<p>事件函数</p>
<p>btn.onclick=function(){}</p>
<p>this执向调用者btn</p>
</li>
<li>
<p>定时器函数</p>
<p>setInterval(function(){},1000)//实际上是windows.setInterval</p>
<p>this指向window，只能用bind(this)改变this指向，因为call和apply是立即执行。</p>
</li>
<li>
<p>立即执行函数</p>
<p>(function(){})()或者(function (){} ())</p>
<p>this 指向windows</p>
</li>
</ol>
<h2 id="高阶函数">高阶函数</h2>
<p>它接收函数作为参数，将函数的返回值作为输出</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="cm">/** 
</span><span class="cm"> * 数值转换
</span><span class="cm"> * @param {Number} val 要被处理的数值
</span><span class="cm"> * @param {Function} fn 处理输入的val
</span><span class="cm"> * @return {Number || String}
</span><span class="cm"> */</span>
<span class="kr">const</span> <span class="nx">toConvert</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">fn</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
<span class="p">};</span>

<span class="kr">const</span> <span class="nx">addUnitW</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">val</span> <span class="o">+</span> <span class="s1">&#39;W&#39;</span><span class="p">;</span>
<span class="p">};</span>

<span class="nx">toConvert</span><span class="p">(</span><span class="mf">123.1</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">);</span> <span class="c1">// 124
</span><span class="c1"></span><span class="nx">toConvert</span><span class="p">(</span><span class="mf">123.1</span><span class="p">,</span> <span class="nx">addUnitW</span><span class="p">);</span> <span class="c1">// &#34;123.1W&#34;
</span></code></pre></td></tr></table>
</div>
</div><p>另外，JS的回调函数同样是以实参形式传入其他函数中，这也是高阶函数（在函数式编程中回调函数被称为 lambda表达式）:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">d</span> <span class="p">=&gt;</span> <span class="nx">d</span> <span class="o">**</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [1, 4, 9, 16, 25]
</span><span class="c1"></span>
<span class="c1">// 以上，等同于：
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">square</span> <span class="o">=</span> <span class="nx">d</span> <span class="p">=&gt;</span> <span class="nx">d</span> <span class="o">**</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">square</span><span class="p">);</span> <span class="c1">// [1, 4, 9, 16, 25]
</span></code></pre></td></tr></table>
</div>
</div><h2 id="闭包">闭包</h2>
<h3 id="变量作用域">变量作用域</h3>
<ul>
<li>局部变量（函数作用域）
<ol>
<li>调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁</li>
<li>每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的</li>
<li>在函数作用域中可以访问全局变量，反之不行</li>
<li>当在函数作用域中操作一个变量时，有则直接使用。没有，则去上一级作用域中去寻找</li>
<li>定义形参就相当于var 定义变量</li>
</ol>
</li>
<li>全局变量（全局作用域）
<ol>
<li>在打开页面时创建，关闭页面时销毁</li>
<li>直接编写在script标签中的js代码，都在全局作用域</li>
<li>在函数中不用var定义的变量也在全局作用域中</li>
<li>全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用</li>
<li>创建的变量都变成window对象的属性，创建的函数都变成window对象的方法</li>
</ol>
</li>
<li>当函数执行完毕，本作用域内的局部变量就会自动销毁</li>
</ul>
<h3 id="闭包的产生">闭包的产生</h3>
<ol>
<li>当一个嵌套的内部函数引用了嵌套的外部函数的变量（函数），就产生了闭包</li>
<li>通过chrome的debug调试查看closure就是闭包</li>
</ol>
<h3 id="闭包的定义">闭包的定义</h3>
<p>指有权访问另一个函数作用域中变量的函数</p>
<h3 id="闭包的作用">闭包的作用</h3>
<p>在函数a执行完毕并返回后，闭包使得Js的垃圾回收机不会回收a所占用的资源，因为a的内部函数b需要依赖a中的变量，从而延伸了变量的作用范围(生命周期)。</p>
<h3 id="闭包的生命周期">闭包的生命周期</h3>
<p>产生：在嵌套内部函数定义执行完成时就产生了（不是在调用时）</p>
<p>死亡：在嵌套的内部函数成为垃圾对象时</p>
<h6 id="demo">demo</h6>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="mf">1.</span><span class="kd">function</span> <span class="nx">fn</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
            <span class="k">return</span> <span class="kd">function</span> <span class="nx">fun</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
            <span class="p">};</span>
        <span class="p">}</span>
        <span class="c1">//fn外面的作用域访问fn()内部的局部变量
</span><span class="c1"></span>        <span class="nx">fn</span><span class="p">()();</span><span class="c1">//10
</span><span class="c1"></span>

 <span class="mf">2.</span>      <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="kd">function</span> <span class="nx">fn</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">2</span>
            <span class="kd">function</span> <span class="nx">add</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">a</span><span class="o">++</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span>
            <span class="p">}</span>

            <span class="kd">function</span> <span class="nx">minus</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">a</span><span class="o">--</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span>
            <span class="p">}</span>

            <span class="k">return</span> <span class="p">{</span><span class="nx">add</span><span class="p">,</span> <span class="nx">minus</span><span class="p">}</span>
        <span class="p">}</span>
<span class="c1">//没有触发闭包
</span><span class="c1"></span>        <span class="nx">fn</span><span class="p">().</span><span class="nx">add</span><span class="p">()</span><span class="c1">//3
</span><span class="c1"></span>        <span class="nx">fn</span><span class="p">().</span><span class="nx">minus</span><span class="p">()</span><span class="c1">//1
</span><span class="c1">//区别
</span><span class="c1"></span>        <span class="kd">let</span> <span class="nx">fn1</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">()</span> <span class="c1">//触发闭包
</span><span class="c1"></span>        <span class="nx">fn1</span><span class="p">.</span><span class="nx">add</span><span class="p">()</span><span class="c1">//3
</span><span class="c1"></span>        <span class="nx">fn1</span><span class="p">.</span><span class="nx">minus</span><span class="p">()</span><span class="c1">//2
</span><span class="c1"></span>    <span class="p">}</span>
     
     <span class="c1">//如果fn()写成var f = fn()
</span><span class="c1"></span>     <span class="c1">//那么再执行完后就不会释放闭包中的a，因为f变量指向fn()，return的函数中有对a的引用
</span><span class="c1"></span>     <span class="c1">//当f=null时，闭包死亡，因为包函闭包的函数对象成为垃圾对象
</span></code></pre></td></tr></table>
</div>
</div><h3 id="闭包的例子">闭包的例子</h3>
<h6 id="获取ul中li的索引号">获取ul中li的索引号</h6>
<ul>
<li>最初的方法</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">lis</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.nav&#39;</span><span class="p">).</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span><span class="c1">//注意：这里lis是一个伪数组，循环中lis.length会计算多次，所以写成for(var i = 0 ,length=lis.length; i &lt; length ;i++)这样能加快运行效率
</span><span class="c1"></span>            <span class="nx">lis</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;index&#39;</span><span class="p">,</span> <span class="nx">i</span><span class="p">);</span>
            <span class="nx">lis</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;index&#39;</span><span class="p">));</span>
            <span class="p">})</span>
        <span class="p">}</span><span class="c1">//在循环的同时给每个li添加自定义属性index，需要时再读取属性值
</span></code></pre></td></tr></table>
</div>
</div><ul>
<li>利用闭包</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//创建了4个立即执行函数
</span><span class="c1"></span>            <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">num</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">lis</span><span class="p">[</span><span class="nx">num</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
                <span class="p">}</span><span class="nx">func</span>
            <span class="p">})(</span><span class="nx">i</span><span class="p">)</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>这里面的闭包指的是匿名函数，通过(i)把值保存到了num中。每个点击事件都有一个局部变量num，num保存的是相应的i值。</p>
<ul>
<li>错误写法</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">lis</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
            <span class="p">})</span>
        <span class="p">}</span><span class="c1">//无论点击哪个li都输出4
</span></code></pre></td></tr></table>
</div>
</div><p>每个li标签的onclick事件执行时，本身onclick绑定的function的作用域中没有变量i，i为undefined,则解析引擎会寻找父级作用域，发现父级作用域中有i，且for循环绑定事件结束后，i已经赋值为4，所以每个li标签的onclick事件执行时，log的都是父作用域中的i，也就是4。</p>
<h6 id="经典例子">经典例子</h6>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">fn</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">num</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
            <span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">++</span><span class="nx">n</span><span class="p">);</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="o">++</span><span class="nx">num</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">fn</span><span class="p">()();</span><span class="c1">// 1 4
</span><span class="c1"></span>        <span class="nx">fn</span><span class="p">()();</span><span class="c1">//1 4
</span><span class="c1"></span>        
        <span class="kd">var</span> <span class="nx">f1</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">();</span>
        <span class="nx">f1</span><span class="p">();</span><span class="c1">//1 4
</span><span class="c1"></span>        <span class="nx">f1</span><span class="p">();</span><span class="c1">//1 5
</span><span class="c1"></span>
        
</code></pre></td></tr></table>
</div>
</div><p>直接调用fn函数，此时fn执行完后，就连同它的变量num一同销毁，但是如果将fn的返回值赋给f1，这时候相当于f1=function(){var n = 0};并且匿名函数内部引用这fn里面的变量num，所以变量num无法被销毁，而变量n在调用完后会销毁，在每次调用时新建，于是最后只剩下num，所以再次调用时num是在4的基础上+1。</p>
<h3 id="定时器中的闭包函数">定时器中的闭包函数</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">		<span class="c1">//3秒后同时打印所有li元素的内容
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">lis</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.nav&#39;</span><span class="p">).</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">lis</span><span class="p">[</span><span class="nx">a</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">);</span>
                <span class="p">},</span> <span class="mi">3000</span><span class="p">)</span>
            <span class="p">})(</span><span class="nx">i</span><span class="p">);</span>
        <span class="p">}</span>
        
        <span class="c1">//每隔3秒打印一个li元素的内容
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">lis</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.nav&#39;</span><span class="p">).</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">lis</span><span class="p">[</span><span class="nx">a</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">);</span>
                <span class="p">},</span> <span class="nx">a</span><span class="o">*</span><span class="mi">3000</span><span class="p">)</span>
            <span class="p">})(</span><span class="nx">i</span><span class="p">);</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="闭包的应用定义js模块">闭包的应用：定义js模块</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;myModule.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
   <span class="kd">let</span> <span class="nx">fn</span> <span class="o">=</span> <span class="nx">myModule</span><span class="p">()</span> <span class="c1">//使用第一种必须要先执行函数
</span><span class="c1"></span>    <span class="nx">fn</span><span class="p">.</span><span class="nx">doSomething</span><span class="p">()</span>
    <span class="nx">myModule2</span><span class="p">.</span><span class="nx">doSomething</span><span class="p">()</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">myModule</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;my msg&#39;</span>

    <span class="kd">function</span> <span class="nx">doSomething</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nx">doSomething2</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mag</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">())</span>
    <span class="p">}</span>

    <span class="k">return</span> <span class="p">{</span>
        <span class="nx">doSomething</span><span class="p">,</span>
        <span class="nx">doSomething2</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//如果是匿名函数的自调用，则暴露在window对象中
</span><span class="c1"></span><span class="p">(</span><span class="kd">function</span> <span class="nx">myModule2</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;my msg&#39;</span>

    <span class="kd">function</span> <span class="nx">doSomething</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nx">doSomething2</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mag</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">())</span>
    <span class="p">}</span>

    <span class="nb">window</span><span class="p">.</span><span class="nx">myModule2</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">doSomething</span><span class="p">,</span>
        <span class="nx">doSomething2</span>
    <span class="p">}</span>
<span class="p">})()</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="闭包的缺点">闭包的缺点</h3>
<p>因为闭包会使得Js的垃圾回收机不会回收占用的资源，滥用闭包会造成内存泄露，所以在必要时，我们要及时释放这个闭包函数</p>
<h3 id="内存溢出与内存泄漏">内存溢出与内存泄漏</h3>
<p>内存溢出：栈溢出，堆溢出</p>
<p>内存泄露：内存泄漏积累多了就容易导致内存溢出</p>
<p>常见的内存泄漏：</p>
<ol>
<li>意外的全局变量</li>
<li>没有及时清理的计时器或回调函数</li>
<li>闭包</li>
</ol>
<h3 id="let的出现">Let的出现</h3>
<p>将上面的错误写法中的var改为let，let会产生块级作用域</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">lis</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">lis</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
            <span class="p">})</span>
        <span class="p">}</span><span class="c1">//点击li输出相应的索引
</span></code></pre></td></tr></table>
</div>
</div><h2 id="递归">递归</h2>
<p>函数内部自己调用自己，作用和循环一样</p>
<p>注意：防止发生栈溢出，所以要加退出条件return</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
            <span class="nx">gname</span><span class="o">:</span> <span class="s1">&#39;家电&#39;</span><span class="p">,</span>
            <span class="nx">goods</span><span class="o">:</span> <span class="p">[{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="mi">11</span><span class="p">,</span>
                <span class="nx">gname</span><span class="o">:</span> <span class="s1">&#39;冰箱&#39;</span><span class="p">,</span>
                <span class="nx">niubi</span><span class="o">:</span> <span class="p">[{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="mi">111</span><span class="p">,</span>
                    <span class="nx">gname</span><span class="o">:</span> <span class="s1">&#39;haha&#39;</span>
                <span class="p">}]</span>
            <span class="p">},</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span>
                <span class="nx">ganme</span><span class="o">:</span> <span class="s1">&#39;洗衣机&#39;</span>
            <span class="p">}]</span>
        <span class="p">},</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
            <span class="nx">gname</span><span class="o">:</span> <span class="s1">&#39;服饰&#39;</span>
        <span class="p">}]</span>
        <span class="c1">//输入id号返回数据对象
</span><span class="c1"></span>        <span class="c1">// 1.利用foreach遍历
</span><span class="c1"></span>        <span class="kd">function</span> <span class="nx">getid</span><span class="p">(</span><span class="nx">json</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="p">{};</span>
            <span class="nx">json</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">json</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// console.log(value);
</span><span class="c1"></span>                <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
                    <span class="c1">// console.log(value);
</span><span class="c1"></span>                    <span class="nx">o</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
                    <span class="c1">// 2.想要得到里层的数据 11 12
</span><span class="c1"></span>                    <span class="c1">//里面应该有goods数组，且长度不为0
</span><span class="c1"></span>                <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">goods</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span><span class="p">.</span><span class="nx">goods</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">o</span> <span class="o">=</span> <span class="nx">getid</span><span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">goods</span><span class="p">,</span> <span class="nx">id</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">niubi</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span><span class="p">.</span><span class="nx">niubi</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">o</span> <span class="o">=</span> <span class="nx">getid</span><span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">niubi</span><span class="p">,</span> <span class="nx">id</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">});</span>
            <span class="k">return</span> <span class="nx">o</span><span class="p">;</span>
        <span class="p">};</span>

        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getid</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="mi">1</span><span class="p">));</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getid</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getid</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="mi">12</span><span class="p">));</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getid</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="mi">111</span><span class="p">));</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="浅拷贝和深拷贝">浅拷贝和深拷贝</h2>
<ul>
<li>
<p>浅拷贝只是拷贝一层，更深层次的对象级别的只拷贝引用（修改数据会修改原来的）</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{</span>
       <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;zs&#39;</span><span class="p">,</span>
       <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span>
       <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;男&#39;</span><span class="p">,</span>
       <span class="nx">dog</span><span class="o">:</span> <span class="p">{</span>
         <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;金毛&#39;</span><span class="p">,</span>
         <span class="nx">age</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
         <span class="nx">yellow</span><span class="o">:</span> <span class="s1">&#39;黄色&#39;</span>
       <span class="p">}</span>
     <span class="p">}</span>

     <span class="kd">var</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="p">{};</span>

<span class="kd">function</span> <span class="nx">copy</span><span class="p">(</span><span class="nx">o1</span><span class="p">,</span> <span class="nx">o2</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">o1</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">o2</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">o1</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">copy</span><span class="p">(</span><span class="nx">obj1</span><span class="p">,</span> <span class="nx">obj2</span><span class="p">);</span>

    <span class="c1">// 修改obj1中的成员
</span><span class="c1"></span>    <span class="nx">obj1</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;xxxx&#39;</span><span class="p">;</span>
    <span class="nx">obj1</span><span class="p">.</span><span class="nx">dog</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;大黄&#39;</span><span class="p">;</span>

    <span class="nx">console</span><span class="p">.</span><span class="nx">dir</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span>
<span class="c1">// name 属性深拷贝,不改变;dog对象浅拷贝, dog.name 随之发生改变
</span></code></pre></td></tr></table>
</div>
</div><p>ES6语法糖：Object.assign(new,old)</p>
</li>
<li>
<p>深拷贝拷贝多层，每一级的数据都会拷贝</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">// 定义一个深拷贝函数  接收目标target参数
</span><span class="c1"></span><span class="kd">function</span> <span class="nx">deepClone</span><span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// 定义一个变量
</span><span class="c1"></span>    <span class="kd">let</span> <span class="nx">result</span><span class="p">;</span>
    <span class="c1">// 如果当前需要深拷贝的是一个对象的话
</span><span class="c1"></span>    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">target</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// 如果是一个数组的话
</span><span class="c1"></span>        <span class="k">if</span> <span class="p">(</span><span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">target</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">result</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// 将result赋值为一个数组，并且执行遍历
</span><span class="c1"></span>            <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">// 递归克隆数组中的每一项
</span><span class="c1"></span>                <span class="nx">result</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">deepClone</span><span class="p">(</span><span class="nx">target</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span>
            <span class="p">}</span>
         <span class="c1">// 判断如果当前的值是null的话；直接赋值为null
</span><span class="c1"></span>        <span class="p">}</span> <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">target</span><span class="o">===</span><span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">result</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
         <span class="c1">// 判断如果当前的值是一个RegExp对象的话，直接赋值    
</span><span class="c1"></span>        <span class="p">}</span> <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">constructor</span><span class="o">===</span><span class="nb">RegExp</span><span class="p">){</span>
            <span class="nx">result</span> <span class="o">=</span> <span class="nx">target</span><span class="p">;</span>
        <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
         <span class="c1">// 否则是普通对象，直接for in循环，递归赋值对象的所有值
</span><span class="c1"></span>            <span class="nx">result</span> <span class="o">=</span> <span class="p">{};</span>
            <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">result</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">deepClone</span><span class="p">(</span><span class="nx">target</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
            <span class="p">}</span>
        <span class="p">}</span>
     <span class="c1">// 如果不是对象的话，就是基本数据类型，那么直接赋值
</span><span class="c1"></span>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">result</span> <span class="o">=</span> <span class="nx">target</span><span class="p">;</span>
  <span class="p">}</span>
     <span class="c1">// 返回最终结果
</span><span class="c1"></span>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==:先判断数组再判断对象，因为数组也属于对象，如果对象中没有function和RegExp且为json对象可以先用</p>
<p>JSON.stringify转为字符串再用JSON.parse转为新的对象</p>
</li>
</ul>
<h2 id="正则">正则</h2>
<h3 id="创建">创建</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">&#34;正则表达式&#34;</span><span class="err">，</span><span class="s2">&#34;匹配模式&#34;</span><span class="p">);</span>
<span class="c1">//正则表达式为字符串，匹配模式包括i（忽略大小写），g（全局匹配模式）
</span><span class="c1"></span><span class="kd">var</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="sr">/ /i</span><span class="p">;</span>
<span class="c1">//字面量创建
</span></code></pre></td></tr></table>
</div>
</div><h3 id="检测">检测</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">regexp</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">str</span><span class="p">);</span>
<span class="c1">//返回布尔值
</span></code></pre></td></tr></table>
</div>
</div><h3 id="特殊字符">特殊字符</h3>
<h4 id="边界符">边界符</h4>
<ul>
<li>
<p>^：行首文本以谁开始</p>
</li>
<li>
<p>&amp;：行尾文本以谁结束</p>
</li>
<li>
<p>\bxxx\b：表示单词边界</p>
<p>/^abc$/</p>
</li>
</ul>
<h4 id="字符类">字符类</h4>
<ul>
<li>
<p><i class="far fa-square fa-fw"></i> ：中括号里的内容是或的关系</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="sr">/[abc]/</span>
<span class="nx">表示包含有a或b或c的一个或多个</span>
<span class="sr">/^[abc]$/</span>
<span class="nx">表示有且仅有其中一个</span>
<span class="sr">/[^abc]/</span>
<span class="nx">除了中括号里的</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="量词符">量词符</h4>
<p>用于设定每个模式出现的次数</p>
<table>
<thead>
<tr>
<th>量词</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>*</td>
<td>重复0次或更多次，相当于{0，}</td>
</tr>
<tr>
<td>+</td>
<td>重复一次或更多次，相当于{1，}</td>
</tr>
<tr>
<td>？</td>
<td>重复0次或一次，相当于{0，1}</td>
</tr>
<tr>
<td>{n}</td>
<td>重复n次</td>
</tr>
<tr>
<td>{n,}</td>
<td>重复n次或更多次</td>
</tr>
<tr>
<td>{n,m}</td>
<td>重复n次到m次（中间无空格）</td>
</tr>
</tbody>
</table>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="sr">/^a*$/</span>
<span class="sr">/^a{3,8}$/</span>
<span class="sr">/^abc{3}$/</span>
<span class="sr">/^[abc]{3}$/</span>     <span class="c1">//[]内的单个内容可以重复三次
</span><span class="c1"></span><span class="sr">/^(abc){3}$/</span>     <span class="c1">//()内的重复三次
</span></code></pre></td></tr></table>
</div>
</div><h3 id="正则中的预定义类">正则中的预定义类</h3>
<table>
<thead>
<tr>
<th>预定义类</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>\d</td>
<td>匹配0-9之间的任一数字</td>
</tr>
<tr>
<td>\D</td>
<td>匹配0-9以外的字符，相当于/[^0-9]/</td>
</tr>
<tr>
<td>\w</td>
<td>匹配任意的字母，数字和下划线，相当于/[A-Za-z0-9_]/</td>
</tr>
<tr>
<td>\W</td>
<td>除了所有字母，数字和下划线以外的字符，相当于/[^A-Za-z0-9_]/</td>
</tr>
<tr>
<td>\s</td>
<td>匹配空格（包括换行符，制表符，空格符等），相当于[\t\r\n\v\f]，去除开头和结尾空格/^\s*|\s*$/ g</td>
</tr>
<tr>
<td>\S</td>
<td>匹配非空格的字符，相当于/[^\t\r\n\v\f]/</td>
</tr>
</tbody>
</table>
<h3 id="正则中的替换">正则中的替换</h3>
<ul>
<li>
<p>replace(//,'')只替换第一个，加上/g全局替换</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">btn</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">div</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">text</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/激情|gay/g</span><span class="p">,</span> <span class="s1">&#39;**&#39;</span><span class="p">);</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="修饰符">修饰符</h3>
<ul>
<li>/g：全局匹配</li>
<li>/i：忽略大小写</li>
<li>/gi：全局匹配且忽略大小写</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>[ ]</td>
<td>中括号里的内容是或的关系</td>
</tr>
<tr>
<td>[ab]</td>
<td>a|b</td>
</tr>
<tr>
<td>[a-z]</td>
<td>任意小写字母</td>
</tr>
<tr>
<td>[A-Z]</td>
<td>任意大写字母</td>
</tr>
<tr>
<td>[A-z]</td>
<td>任意字母</td>
</tr>
<tr>
<td>/a[bde]c/</td>
<td>检测一个字符串中是否含有abc或adc或aec</td>
</tr>
<tr>
<td>/[^]/</td>
<td>除了中括号里的都行</td>
</tr>
</tbody>
</table>
<h1 id="es5">ES5</h1>
<h2 id="严格模式">严格模式</h2>
<p>为脚本开启‘use strict’写在script标签第一行</p>
<p>为函数开启写在函数体第一行</p>
<h3 id="特点">特点</h3>
<ol>
<li>
<p>变量必须先声名</p>
<p>==区别：==标准模式中</p>
<p>​			a=2||this.a=2是给window对象的一个属性，可以用delete删除</p>
<p>​			var a=2也是给window对象一个属性，但是不能用delete删除</p>
</li>
<li>
<p>全局作用域中this是undefined，而不是windows对象</p>
</li>
<li>
<p>构造函数不加new调用（不创建实例）的话会报错，因为严格模式中this为undefined，要new之后this才有指向的实例对象，标准模式中构造函数没有实例对象，它的this也是指向window对象的</p>
<p>==注意：==定时器的this还是指向window</p>
</li>
<li>
<p>参数不能同名</p>
</li>
</ol>
<h2 id="json对象">JSON对象</h2>
<p>写法：</p>
<ul>
<li>只能用双引号</li>
<li>所有名字都必须用双引号包起来</li>
</ul>
<h4 id="json对象转json字符串">JSON对象转JSON字符串</h4>
<p>JSON.stringify(json)</p>
<h4 id="json字符串转json对象">JSON字符串转JSON对象</h4>
<p>JSON.parse(json)</p>
<h4 id="json的简写">JSON的简写</h4>
<p>名字和值一样时保留一样即可</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">12</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">15</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">c</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="p">,</span><span class="nx">c</span><span class="p">}</span>
<span class="c1">//相当于
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="o">:</span><span class="nx">b</span><span class="p">,</span><span class="nx">c</span><span class="o">:</span><span class="nx">c</span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>json中方法的简写</p>
<p>ES6中可以和面向对象中的方法一样把function删除</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span>
 <span class="s2">&#34;name&#34;</span><span class="o">:</span><span class="s2">&#34;xqz&#34;</span><span class="p">,</span>
 <span class="nx">show</span><span class="p">(){</span>
     <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span>
 <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//相当于
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span>
	<span class="s2">&#34;name&#34;</span><span class="o">:</span><span class="s2">&#34;xqz&#34;</span><span class="p">,</span>
	<span class="nx">show</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="object扩展">Object扩展</h2>
<p>常用的三个静态方法</p>
<h3 id="objectcreateprototypedescriptors">Object.create(prototype,[descriptors])</h3>
<p>作用：</p>
<ol>
<li>
<p>以指定对象为原型创建新的对象（通过__proto__可以找到）</p>
</li>
<li>
<p>为新的对象指定新的属性，并对属性进行描述</p>
<p>value：指定值</p>
<p>writable：标识当前属性值是否可以修改，默认为false</p>
<p>configurable:标识当前属性是否可以被删除，默认为false</p>
<p>enumberable:标识当前属性是否能用for in 枚举 默认为 false</p>
</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES5Object%E6%89%A9%E5%B1%951.png" /></p>
<h3 id="objectdefineproperty">Object.defineProperty()</h3>
<ul>
<li>定义对象中新属性或修改原有的属性</li>
<li>obj：目标对象</li>
<li>prop：要增加或修改的属性名字</li>
<li>descriptor：增加或修改的属性所持有的特性
<ol>
<li>value：设置属性的值，默认为undefined</li>
<li>writable：值是否可以重写，默认为false，遍历时就无法遍历出来</li>
<li>enumerable：目标属性是否可以被枚举，默认为false也遍历不出来</li>
<li>configurable：目标属性是否可以别删除或者再次修改特性，默认false</li>
</ol>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="s1">&#39;num&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">value</span><span class="o">:</span> <span class="mi">20000</span><span class="p">,</span>
            <span class="nx">writable</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
            <span class="nx">enumerable</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
            <span class="nx">configurable</span><span class="o">:</span> <span class="kc">false</span>
        <span class="p">})</span>
        <span class="k">delete</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">num</span><span class="p">;</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="objectdefinepropertiesobjectdescriptors">Object.defineProperties(object,descriptors)</h3>
<p>作用：</p>
<ol>
<li>为指定对象定义扩展多个属性</li>
<li>get：用来获取当前属性值的回调函数</li>
<li>set：用来修改当前属性值的触发回调函数，并且实参即为修改后的值</li>
<li>存取器属性：setter，getter一个用来存，一个用来取</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">firstName</span><span class="o">:</span><span class="s1">&#39;x&#39;</span><span class="p">,</span><span class="nx">lastName</span><span class="o">:</span><span class="s1">&#39;qz&#39;</span><span class="p">}</span>
        <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperties</span><span class="p">(</span><span class="nx">obj</span><span class="p">,{</span>
            <span class="nx">fullName</span><span class="o">:</span><span class="p">{</span>
                <span class="nx">get</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="c1">//获取属性时自动调用get方法
</span><span class="c1"></span>                <span class="p">},</span>
                <span class="nx">set</span><span class="o">:</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span><span class="c1">//设置属性时自动调用set方法
</span><span class="c1"></span>                    <span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">)</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="o">=</span><span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="o">=</span><span class="nx">arr</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">fullName</span><span class="p">)</span>
        <span class="nx">obj</span><span class="p">.</span><span class="nx">fullName</span><span class="o">=</span><span class="s1">&#39;w,xx&#39;</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">fullName</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><p>对象本身的两个方法</p>
<p>get propertyName(){}</p>
<p>set propertyName(){}</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">let</span> <span class="nx">obj2</span><span class="o">=</span><span class="p">{</span>
            <span class="nx">firstName</span><span class="o">:</span><span class="s1">&#39;x&#39;</span><span class="p">,</span>
            <span class="nx">lastName</span><span class="o">:</span><span class="s1">&#39;qz&#39;</span><span class="p">,</span>
            <span class="nx">get</span> <span class="nx">fullName</span><span class="p">(){</span>
                <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="o">+</span><span class="s1">&#39;&#39;</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">lastName</span>
            <span class="p">},</span>
            <span class="nx">set</span> <span class="nx">fullName</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
                <span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">)</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)</span>
        <span class="nx">obj2</span><span class="p">.</span><span class="nx">fullName</span><span class="o">=</span><span class="s1">&#39;w xx&#39;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="array扩展">Array扩展</h2>
<h3 id="indexof">indexOf</h3>
<p>Array.prototype.indexOf(value)          得到值在数组中的第一个下标</p>
<h3 id="lastindexof">lastIndexOf</h3>
<p>Array.prototype.lastIndexOf(value)           得到值在数组中的最后一个下标</p>
<h3 id="foreach">forEach</h3>
<p>Array.prototype.forEach(function(item,index){})          遍历数组</p>
<ol>
<li>array.forEach(function(currentValue,index,arr)) 遍历每个元素，将每个元素的返回值给回调函数</li>
<li>数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参来读取这些内容</li>
<li>浏览器会在回调函数中传递三个参数</li>
</ol>
<ul>
<li>currentValue：数组当前项的值</li>
<li>index：数组当前项的索引</li>
<li>arr：数组对象本身</li>
</ul>
<p>==<strong>注意</strong>==：如果return false会阻止函数继续向下执行，但不会结束遍历，会继续遍历下一个元素，无返回值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;red&#39;</span><span class="p">,</span> <span class="s1">&#39;green&#39;</span><span class="p">,</span> <span class="s1">&#39;blue&#39;</span><span class="p">,</span> <span class="s1">&#39;pink&#39;</span><span class="p">];</span>
        <span class="nx">arr</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">==</span> <span class="s1">&#39;green&#39;</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;找到&#39;</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">11</span><span class="p">);</span>           
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><p>Array.prototype.map(function(item,index){})           遍历数组返回一个新数组，返回加工后的值</p>
<h3 id="map">map</h3>
<p>映射，给多少处理完后还多少</p>
<p>map() 方法==返回一个新数组==，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">array1</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">9</span><span class="p">,</span><span class="mi">16</span><span class="p">];</span>
<span class="kr">const</span> <span class="nx">map1</span> <span class="o">=</span> <span class="nx">array1</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">*</span><span class="mi">2</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">map1</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="filter">filter</h3>
<p>Array.prototype.filter(function(item,index){})           遍历过滤出一个新的子数组，返回条件为true的值</p>
<ol>
<li>array.filter(function(currentValue,index,arr))会==返回一个新的数组==，新数组中是通过检查指定数组中符合条件的所有元素，主要用于筛选数组</li>
<li>通过return true或false来决定保留不保留</li>
</ol>
<p><strong>注意</strong>：直接返回新数组</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">23</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">545</span><span class="p">,</span> <span class="mi">52</span><span class="p">];</span>
        <span class="kd">var</span> <span class="nx">newArr</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">array</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">value</span> <span class="o">&gt;=</span> <span class="mi">20</span><span class="p">;</span>
        <span class="p">})</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newArr</span><span class="p">);</span><span class="c1">//[23,545,52]
</span></code></pre></td></tr></table>
</div>
</div><h3 id="some">some</h3>
<p>array.some(function(currentValue,index,arr))用于查找数组中是否有满足条件的元素</p>
<p>==<strong>注意</strong>==：</p>
<ul>
<li>返回的是布尔值，找到返回true且找到后不会再继续执行，找不到返回false。</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">435</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4524</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">245</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">52</span><span class="p">];</span>
        <span class="kd">var</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">some</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">array</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">value</span> <span class="o">&gt;=</span> <span class="mi">20</span><span class="p">;</span>
        <span class="p">});</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr1</span><span class="p">);</span><span class="c1">//true
</span></code></pre></td></tr></table>
</div>
</div><p><strong>区别</strong>：foreach和filter不会终止迭代，some检测到符合要求的元素后会停止，且返回值三者不同</p>
<h3 id="reduce参数一参数二">reduce（参数一，参数二）</h3>
<p>参数一是回调函数</p>
<p>参数二是tmp的默认值，0</p>
<p>进去一堆，出来一个</p>
<ol>
<li>tmp为中间结果，是函数返回的结果，当遍历到数组最后一个元素是=0时，函数的返回值则为最终结果</li>
<li>item为数组中的每一项</li>
<li>index为数组索引</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span><span class="mi">34</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">2</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="nx">fucntion</span><span class="p">(</span><span class="nx">tmp</span><span class="p">,</span><span class="nx">item</span><span class="p">,</span><span class="nx">index</span><span class="p">){</span>
     <span class="k">if</span><span class="p">(</span><span class="nx">index</span> <span class="o">!=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">){</span>
   	 	<span class="k">return</span> <span class="nx">tmp</span><span class="o">*</span><span class="nx">item</span><span class="p">;</span><span class="c1">//求和
</span><span class="c1"></span>	<span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="k">return</span> <span class="nx">tmp</span><span class="o">*</span><span class="nx">item</span><span class="o">/</span><span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="c1">//最后一次求平均数
</span><span class="c1"></span>    <span class="p">}</span>	
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="function扩展">Function扩展</h2>
<p>Function.prototype.bind()</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/bind.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/bind.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/bind.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/bind.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/bind.png"
        title="bind" /></p>
<h1 id="es6">ES6</h1>
<h3 id="let">let</h3>
<ol>
<li>
<p>产生块级作用域</p>
</li>
<li>
<p>for循环中防止i变成全局变量</p>
</li>
<li>
<p>let无变量提升（js预解析会把var和function（）{}提到最前面）</p>
</li>
<li>
<p>暂时性死区</p>
</li>
<li>
<p>不能重复声明相同的变量名</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="mi">123</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">tmp</span> <span class="o">=</span> <span class="s1">&#39;avd&#39;</span><span class="p">;</span>
                <span class="c1">// let tmp;如果在if中需要用一样的变量名，用let声名
</span><span class="c1"></span>            <span class="p">}</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">tmp</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]();</span>
        <span class="nx">arr</span><span class="p">[</span><span class="mi">1</span><span class="p">]();</span>
        <span class="c1">//每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己的上一级（循环产生的块级作用域）作用域下的i值
</span><span class="c1"></span>    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="const">const</h3>
<ol>
<li>
<p>用来声名常量，值无法更改</p>
</li>
<li>
<p>也具有块级作用域，不存在变量提升</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
            <span class="kr">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
            <span class="k">if</span><span class="p">(</span><span class="kc">true</span><span class="p">){</span>
                <span class="kr">const</span> <span class="nx">a</span><span class="o">=</span><span class="mi">20</span><span class="p">;</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
        <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>必须赋初始值</p>
</li>
<li>
<p>赋值后的内存地址不能修改，但是复杂数据类型内的值可以改</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="mi">100</span><span class="p">,</span><span class="mi">100</span><span class="p">];</span>
<span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">=</span><span class="s1">&#39;a&#39;</span><span class="p">;</span><span class="c1">//这里没有修改内存地址，所以是可以修改的
</span><span class="c1"></span><span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;a&#39;</span><span class="p">,</span><span class="mi">100</span><span class="p">];</span><span class="c1">//这里修改了内存地址，所以是无法修改的
</span></code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="解构赋值">解构赋值</h3>
<p>如果解构后无值则为undefined</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//数组解构
</span><span class="c1"></span>        <span class="kd">let</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
        <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;xuqianzhou&#39;</span><span class="p">,</span>
            <span class="nx">age</span><span class="o">:</span> <span class="mi">13</span>
        <span class="p">};</span>

        <span class="kd">let</span> <span class="p">{</span>
            <span class="nx">name</span><span class="p">,</span>
            <span class="nx">age</span>
        <span class="p">}</span> <span class="o">=</span> <span class="nx">person</span><span class="p">;</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="箭头函数">箭头函数</h3>
<ul>
<li>
<p>不能使用argunments来获取参数</p>
</li>
<li>
<p>函数体只有一句可以省略大括号</p>
</li>
<li>
<p>只有一个参数可以省略括号</p>
</li>
<li>
<p>箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置上下文的this（所处的对象）</p>
<ol>
<li>如果箭头函数外层有函数，箭头函数的this和外层函数的this一摸一样</li>
<li>如果外层没有函数，指向window</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
        <span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span>

        <span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;zhangsan&#39;</span>
        <span class="p">}</span>

        <span class="kd">function</span> <span class="nx">fn</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="c1">//这里两个this相同
</span><span class="c1"></span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="kr">const</span> <span class="nx">fun</span> <span class="o">=</span> <span class="nx">fn</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
        <span class="nx">fun</span><span class="p">();</span>
    <span class="o">&lt;</span><span class="err">/script&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>注意：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">age</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
            <span class="nx">say</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="c1">//这里的this指向window
</span><span class="c1"></span>                <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">obj</span><span class="p">.</span><span class="nx">say</span><span class="p">();</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="形参默认值">形参默认值</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">show</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span><span class="nx">c</span><span class="o">=</span><span class="mi">10</span><span class="p">){</span>
<span class="c1">//当不传b的值，默认为5
</span><span class="c1"></span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="三点运算符">三点运算符</h3>
<ul>
<li>
<p>将不定数量的参数表示为一个数组，只能放在最后</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">      <span class="kr">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span>
            <span class="kd">let</span> <span class="nx">total</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="nx">arr</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="nx">total</span> <span class="o">+=</span> <span class="nx">item</span><span class="p">);</span>
            <span class="k">return</span> <span class="nx">total</span><span class="p">;</span><span class="c1">//50
</span><span class="c1"></span>        <span class="p">};</span>
       <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">sum</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">));</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>可以配合解构使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">obj</span><span class="o">=</span><span class="p">{</span><span class="nx">xxx</span><span class="p">,</span><span class="nx">xxx</span><span class="p">,</span><span class="nx">xxx</span><span class="p">};</span>
<span class="kd">let</span> <span class="p">{</span><span class="nx">s1</span><span class="p">,...</span><span class="nx">s2</span><span class="p">}</span><span class="o">=</span><span class="nx">obj</span><span class="p">;</span><span class="c1">//s1是obj对象中的第一个数据，剩下的在s2数组中
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%89%E7%82%B9%E8%BF%90%E7%AE%97%E7%AC%A6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%89%E7%82%B9%E8%BF%90%E7%AE%97%E7%AC%A6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%89%E7%82%B9%E8%BF%90%E7%AE%97%E7%AC%A6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%89%E7%82%B9%E8%BF%90%E7%AE%97%E7%AC%A6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%89%E7%82%B9%E8%BF%90%E7%AE%97%E7%AC%A6.png"
        title="三点运算符" /></p>
<h3 id="json-1">JSON</h3>
<p>写法：</p>
<ul>
<li>只能用双引号</li>
<li>所有名字都必须用双引号包起来</li>
</ul>
<h4 id="json对象转json字符串-1">JSON对象转JSON字符串</h4>
<p>JSON.stringify(json)</p>
<h4 id="json字符串转json对象-1">JSON字符串转JSON对象</h4>
<p>JSON.parse(json)</p>
<h4 id="json的简写-1">JSON的简写</h4>
<p>名字和值一样时保留一样即可</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">12</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">15</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">c</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="p">,</span><span class="nx">c</span><span class="p">}</span>
<span class="c1">//相当于
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="o">:</span><span class="nx">b</span><span class="p">,</span><span class="nx">c</span><span class="o">:</span><span class="nx">c</span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>json中方法的简写</p>
<p>ES6中可以和面向对象中的方法一样把function删除</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span>
 <span class="s2">&#34;name&#34;</span><span class="o">:</span><span class="s2">&#34;xqz&#34;</span><span class="p">,</span>
 <span class="nx">show</span><span class="p">(){</span>
     <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span>
 <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//相当于
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span>
	<span class="s2">&#34;name&#34;</span><span class="o">:</span><span class="s2">&#34;xqz&#34;</span><span class="p">,</span>
	<span class="nx">show</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="array的扩展方法">Array的扩展方法</h3>
<h4 id="扩展运算符">扩展运算符</h4>
<p>将数组或对象转为用逗号分隔的参数序列，其实就是和剩余参数一个相反的过程，这里用逗号拆开，剩余参数是合并为一个数组</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">];</span>
<span class="nx">log</span><span class="p">(...</span><span class="nx">arr</span><span class="p">)</span><span class="c1">//1 2 3(逗号被log当作参数分隔符)
</span></code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>可以用于合并数组</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">arr1</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">];</span>
<span class="nx">arr2</span><span class="o">=</span><span class="p">[</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">6</span><span class="p">];</span>
<span class="nx">arr3</span><span class="o">=</span><span class="p">[...</span><span class="nx">arr1</span><span class="p">,...</span><span class="nx">arr2</span><span class="p">];</span>
<span class="c1">//或者
</span><span class="c1"></span><span class="nx">arr1</span><span class="p">.</span><span class="nx">push</span><span class="p">(...</span><span class="nx">arr2</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>可以将伪数组转为真正的数组</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//方法一：
</span><span class="c1"></span><span class="nx">arr2</span><span class="o">=</span><span class="p">[...</span><span class="nx">arr1</span><span class="p">];</span><span class="c1">//arr1是伪数组；
</span><span class="c1">//方法二：
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">arr2</span><span class="o">=</span><span class="nb">Array</span><span class="p">.</span><span class="nx">form</span><span class="p">(</span><span class="nx">arr1</span><span class="p">,</span><span class="nx">item</span><span class="p">=&gt;</span><span class="nx">item</span><span class="o">+</span><span class="mi">1</span><span class="p">);</span><span class="c1">//将arr1伪数组转为真正的数组，并且每个数组元素加1
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="arrayform">Array.form()</h4>
<p>将伪数组转为数组且对元素进行加工</p>
<h4 id="arrayfind">Array.find()</h4>
<p>用于找出第一个符合条件的数组成员，返回对象，如果没有找到则返回==undefined==</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">arr</span><span class="p">[{</span>
<span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span>
<span class="nx">name</span><span class="o">:</span><span class="s1">&#39;张三&#39;</span>
<span class="p">},{</span>
<span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span>
<span class="nx">name</span><span class="o">:</span><span class="s1">&#39;李四&#39;</span>
<span class="p">}]</span><span class="err">；</span>
<span class="kd">let</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">find</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span><span class="nx">index</span><span class="p">)=&gt;</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="o">==</span><span class="mi">2</span><span class="p">);</span><span class="c1">//函数用于返回查找的条件
</span></code></pre></td></tr></table>
</div>
</div><h4 id="arrayfindindex">Array.findindex()</h4>
<p>用于找出第一个符合条件的数组成员的==位置==，如果没有返回==-1==</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">9</span><span class="p">,</span><span class="mi">15</span><span class="p">];</span>
<span class="kd">let</span> <span class="nx">index</span><span class="o">=</span><span class="nx">arr</span><span class="p">.</span><span class="nx">findindex</span><span class="p">((</span><span class="nx">value</span><span class="p">,</span><span class="nx">index</span><span class="p">)=&gt;</span><span class="nx">value</span><span class="o">&gt;</span><span class="mi">9</span><span class="p">);</span><span class="c1">//函数用于返回查找的条件
</span><span class="c1"></span><span class="nx">log</span><span class="p">(</span><span class="nx">index</span><span class="p">);</span><span class="c1">//2
</span></code></pre></td></tr></table>
</div>
</div><h3 id="string的扩展方法">String的扩展方法</h3>
<h4 id="模板字符串">模板字符串</h4>
<ul>
<li>
<p>可以解析变量</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="sb">`hello,my name is</span><span class="si">${</span><span class="nx">变量名</span><span class="si">}</span><span class="sb">`</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>可以换行</p>
</li>
<li>
<p>可以调用函数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">sayhello</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="k">return</span><span class="p">....;</span>
<span class="p">}</span>
<span class="kd">let</span> <span class="nx">agree</span> <span class="o">=</span> <span class="sb">`hello,my name is </span><span class="si">${</span><span class="nx">sayhello</span><span class="p">()</span><span class="si">}</span><span class="sb">`</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="includes">includes()</h4>
<p>判断是否包含指定的字符串</p>
<h4 id="startswith">startsWith()</h4>
<h4 id="startswith-1">startsWith()</h4>
<p>是否以某字符开头，返回布尔值</p>
<p>startsWith(&lsquo;Hello&rsquo;)</p>
<h4 id="endswith">endsWith()</h4>
<p>是否以某字符结尾，返回布尔值</p>
<p>endsWith('!')</p>
<h4 id="repeat">repeat()</h4>
<p>将原字符重复n次，返回一个新的字符串</p>
<p>str.repeat(3);</p>
<h4 id="trim">trim()</h4>
<p>删除字符串两边的空格，不影响原字符串，==返回一个新的字符串==（防止用户输入空格）</p>
<h3 id="number的扩展方法">Number的扩展方法</h3>
<p>二进制与八进制数值表示法：二进制0b，八进制0o</p>
<h4 id="isfinite">isFinite()</h4>
<p>判断是否是有限大的数</p>
<h4 id="isnan">isNaN()</h4>
<p>判断是否是NaN</p>
<h4 id="isinteger">isInteger()</h4>
<p>判断是否是整数</p>
<h4 id="parseint">parseInt()</h4>
<p>判断是否是整数</p>
<h4 id="trunc">trunc()</h4>
<p>将字符串转换为对应的数值</p>
<h3 id="object的扩展方法">Object的扩展方法</h3>
<ol>
<li>
<h4 id="objectisv1v2">Object.is(v1,v2)</h4>
</li>
</ol>
<p>判断2个数据是否相等</p>
<ol>
<li>
<h4 id="objectassigntargetsource1source2">Object.assign(target,source1,source2..)</h4>
<p>将源对象的属性赋值到目标对象上，如果没有则使用原来的默认值</p>
</li>
<li>
<h4 id="直接操作_proto_属性">直接操作_proto_属性</h4>
<p>let obj2 = {}</p>
<p>obj2.<em>proto</em> = obj1</p>
</li>
<li>
<h4 id="objectkeys">Object.keys()</h4>
</li>
</ol>
<ul>
<li>
<p>用于获取对象自身所有的属性</p>
</li>
<li>
<p>返回由属性名组成的数组</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
            <span class="nx">pname</span><span class="o">:</span> <span class="s1">&#39;小米&#39;</span><span class="p">,</span>
            <span class="nx">price</span><span class="o">:</span> <span class="mi">1999</span><span class="p">,</span>
            <span class="nx">num</span><span class="o">:</span> <span class="mi">2000</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="promise">Promise</h3>
<p>作用：将异步操作写成同步代码，避免了回调地狱</p>
<p>promise对象的3个状态</p>
<ol>
<li>pending：初始化状态</li>
<li>fullfilled：成功状态</li>
<li>rejected：失败状态</li>
</ol>
<p>过程：</p>
<ol>
<li>首先new promise对象</li>
<li>在异步代码执行成功时，调用resolve()方法，改变对象状态，传的参数在promise实例的then方法中的第一个函数中获取</li>
<li>异步代码执行失败时，调用reject()方法，改变对象状态，传的参数在promise实例的then方法中的第二个函数中获取</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">promise</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span><span class="nx">reject</span><span class="p">)=&gt;{</span>
    <span class="c1">//初始化promise状态：pending：初始化
</span><span class="c1"></span>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;111&#39;</span><span class="p">)</span>
    <span class="c1">//执行异步操作，通常是发送ajax请求，开启定时器
</span><span class="c1"></span>    <span class="nx">setTimeout</span><span class="p">(()=&gt;{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">333</span><span class="p">)</span>
        <span class="c1">//根据异步任务的返回结果去修改promise的状态
</span><span class="c1"></span>        <span class="c1">//异步任务执行成功
</span><span class="c1"></span>        <span class="nx">resolve</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="c1">//修改promise的状态为 fullfilled：成功的状态
</span><span class="c1"></span>
        <span class="c1">//异步任务执行失败
</span><span class="c1"></span>        <span class="c1">// reject(err)   //修改promise的状态为 rejected：失败的状态
</span><span class="c1"></span>    <span class="p">},</span><span class="mi">2000</span><span class="p">)</span>
<span class="p">})</span>

<span class="nx">promise</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">data</span><span class="p">)=&gt;{</span>
    <span class="c1">//成功的回调
</span><span class="c1"></span>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;成功&#39;</span><span class="p">)</span>
<span class="p">},(</span><span class="nx">err</span><span class="p">)=&gt;{</span>
    <span class="c1">//失败的回调
</span><span class="c1"></span>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;失败&#39;</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="symbol">symbol</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol.png"
        title="symbol" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/symbol2.png" /></p>
<p>==注意==：</p>
<ol>
<li>for in 和for of  不能遍历symbol属性</li>
</ol>
<p>对象的Symbol.iterator属性：指向对象的默认遍历器方法（fenerator）</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AF%B9%E8%B1%A1%E7%9A%84iterator%E6%8E%A5%E5%8F%A3.png" /></p>
<p>==注意==：</p>
<ol>
<li>三点运算符和解构赋值实际上就是实现了iterator接口</li>
</ol>
<h3 id="iterator遍历器">iterator遍历器</h3>
<p>概念：是一种接口机制，为各种不同的数据结构提供统一的访问机制</p>
<h4 id="作用">作用：</h4>
<ol>
<li>为各种数据结构，提供一个统一的，简便的访问接口</li>
<li>使得数据结构的成员能够按照某种次序排列</li>
<li>ES6创造了一种新的遍历命令for&hellip;of循环，Iterator接口主要供for&hellip;of消费</li>
</ol>
<h4 id="工作原理">工作原理：</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%8E%A5%E5%8F%A3.png" /></p>
<h4 id="底层实现">底层实现：</h4>
<p>实际上这里的nextIndex使用了闭包
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/iterator%E6%9C%BA%E5%88%B6.png" /></p>
<h4 id="实现了iterator接口的数据结构">实现了iterator接口的数据结构</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png"
        data-srcset="assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png, assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png 1.5x, assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png"
        title="assets/%E5%AE%9E%E7%8E%B0%E4%BA%86interator%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.png" /></p>
<p>==注意==：</p>
<ol>
<li>对象没有iterator接口，无法用for of去遍历循环</li>
</ol>
<h3 id="generator">generator</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator.png" /></p>
<p>普通函数：一路到底</p>
<p>generator函数：函数加*，中间能停，next一次走一步，yield处停止</p>
<ol>
<li>yield的值是next中传入的参数，==注意==：执行函数的第一个next不能传参，因为传了也不能赋值给变量，第二个next传的参数是第一个yield的返回值</li>
<li>调用next方法的返回值是函数return的值，或者yield后面的值</li>
<li>==生成遍历器对象==，给对象的Symbol.iterator属性添加一个遍历器对象后，就能用for of遍历</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generator2.png" /></p>
<h4 id="yield">yield</h4>
<p>可以传参，返回</p>
<p>看成把一个函数分成多个子函数，show_1,show_2</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="c1">//可以传参
</span><span class="c1"></span><span class="kd">function</span><span class="o">*</span> <span class="nx">show</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">)</span>
  <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="k">yield</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;b&#39;</span><span class="p">)</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span>
<span class="p">}</span>

<span class="kd">let</span> <span class="nx">genObj</span> <span class="o">=</span> <span class="nx">show</span><span class="p">()</span><span class="c1">//yield之前函数传参
</span><span class="c1"></span><span class="nx">genObj</span><span class="p">.</span><span class="nx">next</span><span class="p">(</span><span class="mi">12</span><span class="p">)</span><span class="c1">//没法给yield传参，执行函数开始到第一个yield，此时yield有值，但是并没有给变量a
</span><span class="c1"></span><span class="nx">genObj</span><span class="p">.</span><span class="nx">next</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span><span class="c1">//执行yield往后的代码，let a是在yield之后
</span><span class="c1"></span>
<span class="c1">//可以返回
</span><span class="c1"></span><span class="kd">function</span><span class="o">*</span> <span class="nx">show2</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">)</span>
  <span class="k">yield</span> <span class="mi">12</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;b&#39;</span><span class="p">)</span>
  <span class="k">return</span> <span class="mi">55</span>
<span class="p">}</span>
<span class="kd">let</span> <span class="nx">genObj2</span> <span class="o">=</span> <span class="nx">show2</span><span class="p">()</span>
<span class="kd">let</span> <span class="nx">res1</span> <span class="o">=</span> <span class="nx">genObj2</span><span class="p">.</span><span class="nx">next</span><span class="p">()</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res1</span><span class="p">)</span>
<span class="kd">let</span> <span class="nx">res2</span> <span class="o">=</span> <span class="nx">genObj2</span><span class="p">.</span><span class="nx">next</span><span class="p">()</span><span class="c1">//这里的结果是通过函数中的return得到的
</span><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res2</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/generatorAjax.png" /></p>
<p>==注意==：</p>
<ol>
<li>在getNews里面调用next方法并且传参，这样能在generator中得到url的值</li>
</ol>
<h3 id="class类和继承">class类和继承</h3>
<h4 id="类和对象-1">类和对象</h4>
<ul>
<li>
<p>关键字：class</p>
<p>注意:类中所有函数不需要加function关键字，多个方法间不加逗号分隔.</p>
</li>
<li>
<p>方法中的this指向：方法的调用者</p>
</li>
</ul>
<h4 id="构造器-1">构造器</h4>
<ul>
<li>
<p>关键字：constructor()</p>
</li>
<li>
<p>作用:用于传递参数，返回实例对象，new生成对象实例时自动调用。</p>
<p>注意：如果未定义会自动创建一个constructor()</p>
</li>
<li>
<p>this指向：实例对象</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Star</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sing</span><span class="p">(</span><span class="nx">song</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">song</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kd">var</span> <span class="nx">ldh</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">,</span> <span class="mi">18</span><span class="p">);</span>
  <span class="kd">var</span> <span class="nx">zxy</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Star</span><span class="p">(</span><span class="s1">&#39;张学友&#39;</span><span class="p">)</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ldh</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">ldh</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
  <span class="nx">ldh</span><span class="p">.</span><span class="nx">sing</span><span class="p">(</span><span class="s1">&#39;冰雨&#39;</span><span class="p">)</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<p>this的指向问题</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>
  唱歌
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kd">var</span> <span class="nx">that</span><span class="p">;</span>
  <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
    <span class="c1">//构造器里面的this指向实例对象
</span><span class="c1"></span>    <span class="nx">constructor</span><span class="p">(</span><span class="nx">uname</span><span class="p">,</span> <span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">uname</span> <span class="o">=</span> <span class="nx">uname</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span><span class="p">;</span>
      <span class="c1">// this.sing();
</span><span class="c1"></span>      <span class="k">this</span><span class="p">.</span><span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">btn</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">sing</span><span class="p">;</span><span class="c1">//因为这个按钮调用了这个函数
</span><span class="c1"></span>    <span class="p">}</span>
    <span class="c1">//这个方法里的this 指向的是btn 这个按钮
</span><span class="c1"></span>    <span class="nx">sing</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// console.log(this.uname);
</span><span class="c1"></span>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">that</span><span class="p">.</span><span class="nx">uname</span><span class="p">);</span> <span class="c1">//that 里面存储的是constructor里面的this
</span><span class="c1"></span>    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kd">var</span> <span class="nx">father</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Father</span><span class="p">(</span><span class="s1">&#39;刘德华&#39;</span><span class="p">);</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="类的继承-1">类的继承</h4>
<h5 id="关键字-1">关键字</h5>
<ul>
<li>
<h3 id="entends-1">entends</h3>
</li>
<li>
<p>注意：ES6中类没有变量提升，必须先定义类，才能实例化</p>
</li>
</ul>
<h5 id="继承属性-2">继承属性</h5>
<p>调用父类构造函数：</p>
<ul>
<li>关键字：super(x,y)</li>
</ul>
<p>注意：在constructor中调用，且必须在子元素的this之前调用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sum</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">money</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">100</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">Father</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kd">var</span> <span class="nx">son</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
  <span class="nx">son</span><span class="p">.</span><span class="nx">money</span><span class="p">();</span>
  <span class="nx">son</span><span class="p">.</span><span class="nx">sum</span><span class="p">();</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="继承方法-2">继承方法</h5>
<ul>
<li>
<p>子类实例会自动继承父类的方法</p>
</li>
<li>
<p>在子类中调用父类方法：</p>
<ul>
<li>关键字：super.父类方法名()</li>
</ul>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  class Father {
    say() {
      return &#39;我是爸爸&#39;
    }
  }
  class Son extends Father{
    say() {
      console.log(super.say()+&#39;的儿子&#39;);
    }
  }
  var son = new Son();
  son.say();
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<h5 id="扩展子类的方法-1">扩展子类的方法</h5>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Father</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sum</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>

    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">Father</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sub</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kd">var</span> <span class="nx">son</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Son</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
  <span class="nx">son</span><span class="p">.</span><span class="nx">sum</span><span class="p">();</span>
  <span class="nx">son</span><span class="p">.</span><span class="nx">sub</span><span class="p">();</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="深度克隆">深度克隆</h3>
<ol>
<li>arr.concat()：数组浅拷贝</li>
<li>arr.slice()：数组浅拷贝</li>
<li>JSON.parse(JSON.stringify(arr/obj))：数组或对象深拷贝，拷贝的数据里不能有函数，这里实际上拷贝的是json字符串，是基本数据类型</li>
<li>Object.assign()；浅拷贝</li>
<li>浅拷贝拷贝引用，拷贝以后的数据会影响原数据</li>
<li>深拷贝拷贝值，拷贝以后的数据不会影响原数据</li>
</ol>
<h4 id="封装深拷贝函数">封装深拷贝函数</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="p">{</span><span class="nx">userName</span><span class="o">:</span> <span class="s1">&#39;xqz&#39;</span><span class="p">},</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">]</span>

<span class="kd">function</span> <span class="nx">clone</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">arr1</span> <span class="o">=</span> <span class="p">[]</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="k">instanceof</span> <span class="nb">Object</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">arr1</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">clone</span><span class="p">(</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">arr1</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">arr1</span>
  <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="k">instanceof</span> <span class="nb">Object</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{}</span>
    <span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">a</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">obj</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">let</span> <span class="nx">newArr</span> <span class="o">=</span> <span class="nx">clone</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newArr</span><span class="p">)</span>
<span class="nx">newArr</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">userName</span> <span class="o">=</span> <span class="s1">&#39;hhh&#39;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newArr</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="set容器">set容器</h3>
<ol>
<li>无序的，不可重复的多个value的集合体</li>
</ol>
<ul>
<li>
<p>类似于数组，但是成员不能重复,会自动去重</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">();</span>
<span class="kr">const</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">4</span><span class="p">])</span><span class="c1">//可以接收数组初始化，会自动去重4
</span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>数据数量</p>
<p>s.size();</p>
</li>
<li>
<p>可以用于数组去重</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">4</span><span class="p">];</span>
<span class="kr">const</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">str</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">s</span><span class="p">];</span><span class="c1">//这里用扩展运损符将s用逗号分隔开
</span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="实例方法">实例方法</h4>
<ul>
<li>add(value):添加某个值，返回Set结构本身</li>
<li>delete(value):删除某个值，返回布尔值，表示是否和删除成功</li>
<li>has(value):返回布尔值，表示该值是否为set的成员</li>
<li>clear():清除所有成员，没有返回值</li>
</ul>
<h4 id="set遍历">Set遍历</h4>
<p>和数组一样有foreach方法，无返回值</p>
<h5 id="sforeachvaluelogvalue">s.forEach(value=&gt;log(value))</h5>
<h3 id="map容器">map容器</h3>
<ol>
<li>无序的key，不重复的多个key-value的集合体</li>
</ol>
<p>Map()</p>
<p>Map(array)</p>
<p>set(key,value)//添加</p>
<p>get(key)</p>
<p>delete(key)</p>
<p>has(key)</p>
<p>clear()</p>
<p>size</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">let</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">([[</span><span class="s1">&#39;username&#39;</span><span class="p">,</span><span class="mi">25</span><span class="p">],[</span><span class="mi">36</span><span class="p">,</span><span class="s1">&#39;age&#39;</span><span class="p">]])</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">map</span><span class="p">)</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="mi">78</span><span class="p">,</span><span class="s1">&#39;haha&#39;</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">map</span><span class="p">)</span>
<span class="nx">map</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="mi">78</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">map</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="for-of">for of</h3>
<ol>
<li>遍历数组</li>
<li>遍历set</li>
<li>遍历map</li>
<li>遍历字符串</li>
<li>遍历伪数组</li>
</ol>
<h1 id="es7">ES7</h1>
<h2 id="asyncawait">async/await</h2>
<ul>
<li>ES7的新语法，可以更加方便得进行异步操作</li>
<li>async用于函数上（async函数得返回值时promise对象）</li>
<li>await用于saync函数中（await可以得到当前异步的结果）</li>
</ul>
<p>==注意==：因为async返回的也是个promise对象，在调用时也可以用then获得函数的返回值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">queryData</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;adata&#39;</span><span class="p">);</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
  <span class="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">queryData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="p">=&gt;</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：await后面必须跟promise实例对象，才能获取异步的结果</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">num</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span><span class="c1">//resolve成功，reject失败
</span><span class="c1"></span>    <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
      <span class="nx">resolve</span><span class="p">(</span><span class="s1">&#39;nihao&#39;</span><span class="p">)</span>
    <span class="p">},</span> <span class="mi">1000</span><span class="p">)</span>
  <span class="p">});</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>
  <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">num</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="p">=&gt;</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>处理多个异步任务</p>
<p>桉顺序写即可</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">baseURL</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000&#39;</span><span class="p">;</span>
        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">queryData</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">info</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;async1&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;async2?info=&#39;</span> <span class="o">+</span> <span class="nx">info</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span><span class="c1">//用info作为参数
</span><span class="c1"></span>            <span class="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">queryData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span><span class="p">=&gt;{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="arrayincludes">Array.includes()</h2>
<p>表示某个数组是否包含给定的值，返回布尔值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">];</span>
<span class="nx">arr</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span><span class="c1">//true
</span></code></pre></td></tr></table>
</div>
</div><h2 id="指数运算符">指数运算符</h2>
<p>**</p>
<h1 id="模块化规范">模块化规范</h1>
<h2 id="namespace模式">namespace模式</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span><span class="p">{</span>
  <span class="nx">msg</span><span class="o">:</span><span class="s1">&#39;module&#39;</span><span class="p">,</span>
  <span class="nx">foo</span><span class="p">(){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;foo()&#39;</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">msg</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;module.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span>
  <span class="nx">obj</span><span class="p">.</span><span class="nx">msg</span><span class="o">=</span><span class="s1">&#39;修改了&#39;</span><span class="c1">//对象中的值仍然可以被修改
</span><span class="c1"></span>  <span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="iife模式">IIFE模式</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//有独立的作用域
</span><span class="c1"></span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;module&#39;</span>

  <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;foo()&#39;</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span>
  <span class="p">}</span>
  <span class="c1">//给全局的window对象添加属性
</span><span class="c1"></span>  <span class="nb">window</span><span class="p">.</span><span class="nx">module</span><span class="o">=</span><span class="p">{</span><span class="nx">foo</span><span class="p">}</span>
<span class="p">})(</span><span class="nb">window</span><span class="p">)</span><span class="c1">//闭包
</span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;module.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="nx">module</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="iife模式增强">IIFE模式增强</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//有独立的作用域
</span><span class="c1"></span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;module&#39;</span>

  <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;foo()&#39;</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span>
  <span class="p">}</span>

  <span class="nb">window</span><span class="p">.</span><span class="nx">module</span> <span class="o">=</span> <span class="nx">foo</span>
  <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;background&#39;</span><span class="p">,</span> <span class="s1">&#39;red&#39;</span><span class="p">)</span>

<span class="p">})(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">jQuery</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;jquery.min.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;module.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="nx">module</span><span class="p">()</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="commonjs">CommonJS</h2>
<h3 id="规范">规范</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commmonjs.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commmonjs.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commmonjs.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commmonjs.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commmonjs.png"
        title="Commmonjs" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/commonjs.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/commonjs.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/commonjs.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/commonjs.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/commonjs.png"
        title="commonjs" /></p>
<h3 id="基于服务器端">基于服务器端</h3>
<p>文件结构</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/CommonJS-node.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//1
</span><span class="c1"></span><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="o">=</span><span class="p">{</span>
  <span class="nx">msg</span><span class="o">:</span><span class="s1">&#39;module1&#39;</span><span class="p">,</span>
  <span class="nx">foo</span><span class="p">(){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">msg</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//2
</span><span class="c1"></span><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;module2&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="c1">//3
</span><span class="c1"></span><span class="nx">exports</span><span class="p">.</span><span class="nx">foo</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;foo() module3&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="nx">exports</span><span class="p">.</span><span class="nx">bar</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;bar() module3&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="nx">exports</span><span class="p">.</span><span class="nx">arr</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//app.js
</span><span class="c1">//引入第三方库
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">uniq</span> <span class="o">=</span><span class="nx">require</span><span class="p">(</span><span class="s1">&#39;uniq&#39;</span><span class="p">)</span>
<span class="c1">//将其他的模块汇集到主模块
</span><span class="c1"></span><span class="kd">let</span> <span class="nx">module1</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./modules/module1&#39;</span><span class="p">)</span>
<span class="kd">let</span> <span class="nx">module2</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./modules/module2&#39;</span><span class="p">)</span>
<span class="kd">let</span> <span class="nx">module3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./modules/module3&#39;</span><span class="p">)</span>

<span class="nx">module1</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span>
<span class="nx">module2</span><span class="p">()</span>
<span class="nx">module3</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span>
<span class="nx">module3</span><span class="p">.</span><span class="nx">bar</span><span class="p">()</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">uniq</span><span class="p">(</span><span class="nx">module3</span><span class="p">.</span><span class="nx">arr</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>npm install xxx &ndash;save-dev 标识开发依赖包</li>
</ol>
<h3 id="基于浏览器端">基于浏览器端</h3>
<p>文件结构</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Commonjs-browserify.png" /></p>
<ol>
<li>
<p>首先和服务端一样，用module.epxorts进行暴露，require进行引入</p>
</li>
<li>
<p>其次</p>
<p>全局下载browserify包：npm install browerify</p>
<p>再局部下载开发依赖：npm install browerify &ndash;save-dev</p>
</li>
<li>
<p>其次命令行打包处理：</p>
<p><strong>错误内容：</strong>
<code>'browserify' 不是内部或外部命令，也不是可运行的程序 或批处理文件。</code></p>
<p><strong>已解决：</strong>
命令行前面加上browserify的路径即可，
<code>node_modules\.bin\browserify js/src/app.js -o js/dist/build.js</code></p>
<p>==注意==：</p>
</li>
<li>
<p>前面的是原文件</p>
</li>
<li>
<p>-o表示output</p>
</li>
<li>
<p>后面的是输出文件的目录以及文件名字</p>
</li>
<li>
<p>然后在index.html中引入输出的新文件，即可在浏览器端使用require</p>
</li>
</ol>
<h2 id="amd">AMD</h2>
<h3 id="规范-1">规范</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/AMD.png" /></p>
<p>文件结构</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/RequireJS.png" /></p>
<p>下载requireJS</p>
<p>定义没有依赖的模块</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//没有依赖的模块
</span><span class="c1"></span><span class="nx">define</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;dataService&#39;</span>

  <span class="kd">function</span> <span class="nx">getName</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">name</span>
  <span class="p">}</span>

  <span class="c1">//暴露模块
</span><span class="c1"></span>  <span class="k">return</span> <span class="p">{</span><span class="nx">getName</span><span class="p">}</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><p>定义有依赖的模块</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//定义有依赖的模块
</span><span class="c1"></span><span class="nx">define</span><span class="p">([</span><span class="s1">&#39;dataService&#39;</span><span class="p">],</span><span class="kd">function</span> <span class="p">(</span><span class="nx">dataService</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;alerter.js&#39;</span>
  <span class="kd">function</span> <span class="nx">showMsg</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span><span class="p">,</span><span class="nx">dataService</span><span class="p">.</span><span class="nx">getName</span><span class="p">())</span>
  <span class="p">}</span>
  <span class="c1">//暴露模块
</span><span class="c1"></span>  <span class="k">return</span> <span class="p">{</span><span class="nx">showMsg</span><span class="p">}</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><p>main.js</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

  <span class="nx">requirejs</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span>
    <span class="nx">baseUrl</span><span class="o">:</span> <span class="s1">&#39;js/&#39;</span><span class="p">,</span><span class="c1">//基本的路径,出发点在根目录下
</span><span class="c1"></span>    <span class="nx">paths</span><span class="o">:</span> <span class="p">{</span><span class="c1">//配置路径
</span><span class="c1"></span>      <span class="nx">dataService</span><span class="o">:</span> <span class="s1">&#39;./modules/dataService&#39;</span><span class="p">,</span><span class="c1">//属性名和之前定义的模块名一样
</span><span class="c1"></span>      <span class="nx">alerter</span><span class="o">:</span> <span class="s1">&#39;./modules/alerter&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
  <span class="nx">requirejs</span><span class="p">([</span><span class="s1">&#39;alerter&#39;</span><span class="p">],</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">alerter</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">alerter</span><span class="p">.</span><span class="nx">showMsg</span><span class="p">()</span>
  <span class="p">})</span>
<span class="p">})()</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>引入jquery时要小写</li>
</ol>
<p>index.html</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-main</span><span class="o">=</span><span class="s">&#34;./js/main.js&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;./js/libs/require.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>//先通过src找到require第三方库，然后通过data-main找到main.js，再从main中的path找到相应的模块路径
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="cmd">CMD</h2>
<h2 id="es6-1">ES6</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6.png" /></p>
<p>步骤：</p>
<ol>
<li>
<p>定义package.json文件</p>
</li>
<li>
<p>安装babel-cli，babel-preset-es2015和browserify</p>
</li>
</ol>
<ul>
<li>npm install babel-cli browserify -g</li>
<li>npm install babel-preset-es2015 &ndash;save-dev</li>
<li>preset 预设（将es6转为es5的所有插件打包）</li>
</ul>
<ol start="3">
<li>
<p>定义.babelrc文件,</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
  <span class="s2">&#34;presets&#34;</span><span class="o">:</span> <span class="p">[</span><span class="s2">&#34;es2015&#34;</span><span class="p">]</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>编码</p>
<p>文件结构</p>
</li>
</ol>
<h3 id="httpsrawgithubusercontentcomyzuxqzpic-bedmasternotes-imges6babelpng"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6babel.png" /></h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//暴露模块 分别暴露
</span><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;foo() module1&#39;</span><span class="p">)</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="kd">function</span> <span class="nx">bar</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;bar() module1&#39;</span><span class="p">)</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="统一暴露">统一暴露</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//统一暴露
</span><span class="c1"></span><span class="kd">function</span> <span class="nx">fun</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;fun() module2&#39;</span><span class="p">)</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">fun2</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;fun2() module2&#39;</span><span class="p">)</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="p">{</span><span class="nx">fun</span><span class="p">,</span><span class="nx">fun2</span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="默认暴露">默认暴露</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//默认暴露 可以暴露任意数据类型 暴露什么数据接收到的就是什么数据
</span><span class="c1">//只能一次
</span><span class="c1">// export default ()=&gt;{
</span><span class="c1">//     console.log(&#34;默认&#34;)
</span><span class="c1">// }
</span><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
  <span class="nx">msg</span><span class="o">:</span><span class="s1">&#39;默认暴露&#39;</span><span class="p">,</span>
  <span class="nx">foo</span><span class="p">(){</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">msg</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>main</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//引入其他的模块
</span><span class="c1"></span>
<span class="c1">//语法：import xxx from ‘路径’
</span><span class="c1"></span><span class="kr">import</span> <span class="p">{</span><span class="nx">foo</span><span class="p">,</span><span class="nx">bar</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./module1&#39;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">fun</span><span class="p">,</span><span class="nx">fun2</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./module2&#39;</span>
<span class="kr">import</span> <span class="nx">module3</span> <span class="nx">from</span> <span class="s1">&#39;./module3&#39;</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">module3</span><span class="p">.</span><span class="nx">foo</span><span class="p">())</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">(),</span><span class="nx">bar</span><span class="p">(),</span><span class="nx">module2</span><span class="p">)</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">module1</span><span class="p">,</span><span class="nx">module2</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><p>​	==注意==：</p>
<ol>
<li>要使用解构赋值的方式来引入模块</li>
</ol>
<p>5.编译</p>
<ul>
<li>
<p>使用babel将ES6编译为ES5代码：==babel js/src -d js/lib==</p>
<p>​													源文件目录      编译后的文件目录</p>
<p>改成require那种es5的，但是require仍然需要转换</p>
</li>
<li>
<p>使用Browserify编译js：==browserify js/lib/main.js -o js/lib/bundle.js==</p>
</li>
</ul>
<p>6.引入：index.html中使用bundle文件</p>
<p>​	==注意==：</p>
<ol>
<li>一旦修改了js文件就需要重新编译打包</li>
</ol>
<p>打包完成后文件结构</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ES6%E6%89%93%E5%8C%85%E5%90%8E.png" /></p>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-15</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/javascript/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://example.org/posts/javascript/" data-title="javascript" data-via="xxxx" data-hashtags="es6,javascript,模块化规范"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="http://example.org/posts/javascript/" data-hashtag="es6"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="http://example.org/posts/javascript/" data-title="javascript" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="http://example.org/posts/javascript/" data-title="javascript"><i data-svg-src="/lib/simple-icons/icons/line.min.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://example.org/posts/javascript/" data-title="javascript"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="http://example.org/posts/javascript/" data-title="javascript" data-description=""><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="http://example.org/posts/javascript/" data-title="javascript" data-description=""><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="http://example.org/posts/javascript/" data-title="javascript"><i class="fab fa-evernote fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/es6/">es6</a>,&nbsp;<a href="/tags/javascript/">javascript</a>,&nbsp;<a href="/tags/%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/">模块化规范</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/htmlcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" class="prev" rel="prev" title="html&amp;css基础知识"><i class="fas fa-angle-left fa-fw"></i>html&amp;css基础知识</a>
            <a href="/posts/jquery/" class="next" rel="next" title="jquery">jquery<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.89.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://github.com/yzuxqz" target="_blank">yzuxqz</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/katex/katex.min.js"></script><script type="text/javascript" src="/lib/katex/auto-render.min.js"></script><script type="text/javascript" src="/lib/katex/copy-tex.min.js"></script><script type="text/javascript" src="/lib/katex/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
